@extends('layouts.app')
@section('content')
<style>
    @media (min-width: 768px) {
       .img-container {
            object-fit: cover;
            width: 2000px !important;
            height: 732px !important;
       }
    }
	@media (max-width: 767.98px) {
		.feature-description {
			display: none !important;
		}
	}


    .wrap-slider img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: cover; /* ensures no blur, maintains aspect ratio */
    }
</style>
        <!-- categories -->
        <section class="flat-spacing-20">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="tf-categories-wrap">
                            <div class="tf-categories-container">
                                @foreach($categories_query as $categories_key => $category)
                                <div class="collection-item-circle hover-img ">
                                    <a href="{{route('shop.product',['category' => strtolower(str_replace(' ','-',$category->name))])}}" class="collection-image img-style">
                                        <img class="lazyload" data-src="{{url('storage/admin/shop-bo/'.$category->image)}}" alt="collection-img" >
                                    </a>
                                    <div class="collection-content text-center">
                                        <a href="{{route('shop.product',['category' => strtolower(str_replace(' ','-',$category->name))])}}" class="link title fw-6">{{$category->name}}</a>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            <div class="tf-shopall-wrap">
                                <div class="collection-item-circle tf-shopall">
                                    <a href="{{route('shop.product')}}" class="collection-image img-style tf-shopall-icon">
                                        <i class="icon icon-arrow1-top-left"></i>
                                    </a>
                                    <div class="collection-content text-center">
                                        <a href="{{route('shop.product')}}" class="link title fw-6">Shop all</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- /categories -->

        <!-- slider -->
        <div class="tf-slideshow slider-women slider-effect-fade position-relative">
            <div dir="ltr" class="swiper tf-sw-slideshow" data-preview="1" data-tablet="1" data-mobile="1" data-centered="false" data-space="0" data-loop="true" data-auto-play="false" data-delay="2000" data-speed="1000">
                <div class="swiper-wrapper">


                     @foreach($features_query as $features_key => $feature)
                    <div class="swiper-slide mh-50" lazy="true">
                        <div class="wrap-slider">
                            <img class="lazyload img-container" data-src="{{url('storage/admin/shop-bo/'.$feature->image)}}" src="{{url('storage/admin/shop-bo/'.$feature->image)}}" alt="women-slideshow-01" style="width:2000px;height:732px">
                            <div class="box-content">
                                <div class="container">
                                    <h1 class="fade-item fade-item-1">{{$feature->title}}</h1>
                                    <h1 style="margin-bottom: 24px; font-size: 22px; line-height: 19.2px;" class="fade-item fade-item-2 feature-description">{{$feature->description}}</h1>
                                    @if(!empty($feature->link))
                                    <a href="{{$feature->link}}" class="fade-item fade-item-3 tf-btn btn-fill animate-hover-btn btn-xl radius-60"><span>{{$feature->link_text}}</span><i class="icon icon-arrow-right"></i></a>
                                    @endif
                                    <a href="#" class="fade-item fade-item-3 tf-btn btn-fill animate-hover-btn btn-xl radius-60"><span>Shop collection</span><i class="icon icon-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="wrap-pagination">
                <div class="container">
                    <div class="sw-dots sw-pagination-slider justify-content-center"></div>
                </div>
            </div>
        </div>
        <!-- /slider -->
        {{-- COMMENTED CATEGORIES YOU MIGHT LIKE --}}
        {{--<!-- Categories -->
        <section class="flat-spacing-5 pb_0">
            <div class="container">
                <div class="flat-title">
                    <span class="title wow fadeInUp" data-wow-delay="0s">Categories you might like</span>
                </div>
                <div class="hover-sw-nav">
                    <div dir="ltr" class="swiper tf-sw-collection" data-preview="4" data-tablet="2" data-mobile="2" data-space-lg="30" data-space-md="30" data-space="15" data-loop="false" data-auto-play="false">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" lazy="true">
                                <div class="collection-item style-2 hover-img">
                                    <div class="collection-inner">
                                        <a href="#" class="collection-image img-style">
                                            <img class="lazyload" data-src="{{asset('assets/shop/images/collections/collection-42.jpg')}}" src="{{asset('assets/shop/images/collections/collection-42.jpg')}}" alt="collection-img">
                                        </a>
                                        <div class="collection-content">
                                            <a href="#" class="tf-btn collection-title hover-icon fs-15 rounded-full"><span>Tops</span><i class="icon icon-arrow1-top-left"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide" lazy="true">
                                <div class="collection-item style-2 hover-img">
                                    <div class="collection-inner">
                                        <a href="#" class="collection-image img-style">
                                            <img class="lazyload" data-src="{{asset('assets/shop/images/collections/collection-43.jpg')}}" src="{{asset('assets/shop/images/collections/collection-43.jpg')}}" alt="collection-img">
                                        </a>
                                        <div class="collection-content">
                                            <a href="#" class="tf-btn collection-title hover-icon fs-15 rounded-full"><span>Sweatshirts</span><i class="icon icon-arrow1-top-left"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide" lazy="true">
                                <div class="collection-item style-2 hover-img">
                                    <div class="collection-inner">
                                        <a href="#" class="collection-image img-style">
                                            <img class="lazyload" data-src="{{asset('assets/shop/images/collections/collection-44.jpg')}}" src="{{asset('assets/shop/images/collections/collection-44.jpg')}}" alt="collection-img">
                                        </a>
                                        <div class="collection-content">
                                            <a href="#" class="tf-btn collection-title hover-icon fs-15 rounded-full"><span>Swim</span><i class="icon icon-arrow1-top-left"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide" lazy="true">
                                <div class="collection-item style-2 hover-img">
                                    <div class="collection-inner">
                                        <a href="#" class="collection-image img-style">
                                            <img class="lazyload" data-src="{{asset('assets/shop/images/collections/collection-45.jpg')}}" src="{{asset('assets/shop/images/collections/collection-45.jpg')}}" alt="collection-img">
                                        </a>
                                        <div class="collection-content">
                                            <a href="#" class="tf-btn collection-title hover-icon fs-15 rounded-full"><span>Dresses</span><i class="icon icon-arrow1-top-left"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide" lazy="true">
                                <div class="collection-item style-2 hover-img">
                                    <div class="collection-inner">
                                        <a href="s#" class="collection-image img-style">
                                            <img class="lazyload" data-src="{{asset('assets/shop/images/collections/collection-46.jpg')}}" src="{{asset('assets/shop/images/collections/collection-46.jpg')}}" alt="collection-img">
                                        </a>
                                        <div class="collection-content">
                                            <a href="#" class="tf-btn collection-title hover-icon fs-15 rounded-full"><span>Cardigans</span><i class="icon icon-arrow1-top-left"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="nav-sw nav-next-slider nav-next-collection box-icon w_46 round"><span class="icon icon-arrow-left"></span></div>
                    <div class="nav-sw nav-prev-slider nav-prev-collection box-icon w_46 round"><span class="icon icon-arrow-right"></span></div>
                    <div class="sw-dots style-2 sw-pagination-collection justify-content-center"></div>
                </div>
            </div>
        </section>
        <!-- /Categories -->
        <!-- Banner Collection -->
        <section class="flat-spacing-10 pb_0">
            <div class="container">
                <div dir="ltr" class="swiper tf-sw-recent" data-preview="2" data-tablet="2" data-mobile="1.3" data-space-lg="30" data-space-md="15" data-space="15" data-pagination="1" data-pagination-md="1" data-pagination-lg="1">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" lazy="true">
                            <div class="collection-item-v4 hover-img">
                                <div class="collection-inner">
                                    <a href="#" class="collection-image img-style radius-10">
                                        <img class="lazyload" data-src="{{asset('assets/shop/images/collections/collection-47.jpg')}}" src="{{asset('assets/shop/images/collections/collection-47.jpg')}}" alt="collection-img">
                                    </a>
                                    <div class="collection-content wow fadeInUp" data-wow-delay="0s">
                                        <h5 class="heading text_white">The January Collection</h5>
                                        <a href="#" class="tf-btn style-3 fw-6 btn-light-icon rounded-full animate-hover-btn"><span>Shop now</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide" lazy="true">
                            <div class="collection-item-v4 hover-img">
                                <div class="collection-inner">
                                    <a href="#" class="collection-image img-style radius-10">
                                        <img class="lazyload" data-src="{{asset('assets/shop/images/collections/collection-48.jpg')}}" src="{{asset('assets/shop/images/collections/collection-48.jpg')}}" alt="collection-img">
                                    </a>
                                    <div class="collection-content wow fadeInUp" data-wow-delay="0s">
                                        <h5 class="heading text_white">Olympia's picks</h5>
                                        <a href="#" class="tf-btn style-3 fw-6 btn-light-icon rounded-full animate-hover-btn"><span>Shop now</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- /Banner Collection -->
        --}}

        {{-- END COMMENTED --}}
        <!-- Best seller -->
        <section class="flat-spacing-15 pb_0">
            <div class="container">
                <div class="flat-title wow fadeInUp" data-wow-delay="0s">
                    <span class="title">WeProvide Featured Products</span>
                    <p class="sub-title">Purposefully Chosen. Mindfully Made. Beautifully Beneficial</p>
                </div>
                <div class="hover-sw-nav hover-sw-3">
                    <div dir="ltr" class="swiper tf-sw-product-sell wrap-sw-over" data-preview="4" data-tablet="3" data-mobile="2" data-space-lg="30" data-space-md="15" data-pagination="2" data-pagination-md="3" data-pagination-lg="3">
                        <div class="swiper-wrapper">
                            @foreach($featured_products_query as $product)
                            <div class="swiper-slide" lazy="true">
                                <div class="card-product">
                                    <div class="card-product-wrapper">
                                        <a href="{{route('shop.product.view',['id'=>Crypt::encrypt($product->id)])}}" class="product-img">
                                            <img class="lazyload img-product" data-src="{{url('storage/admin/shop-bo/'.$product->image)}}" src="{{url('storage/admin/shop-bo/'.$product->image)}}" alt="image-product">
                                            <img class="lazyload img-hover" data-src="{{url('storage/admin/shop-bo/'.$product->image)}}" src="{{url('storage/admin/shop-bo/'.$product->image)}}" alt="image-product">
                                        </a>
                                        <div class="list-product-btn absolute-2">
                                            <a href="#quick_add_modal" data-bs-toggle="modal" onclick="quick_add(this)" data-product-id="{{Crypt::encrypt($product->id)}}" class="box-icon bg_white quick-add tf-btn-loading">
                                                <span class="icon icon-bag"></span>
                                                <span class="tooltip">Quick Add</span>
                                            </a>
                                            <a href="#quick_view" data-bs-toggle="modal" onclick="quick_view(this)" data-product-id="{{Crypt::encrypt($product->id)}}" class="box-icon bg_white quickview tf-btn-loading">
                                                <span class="icon icon-view"></span>
                                                <span class="tooltip">Quick View</span>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="card-product-info">
                                        <a href="{{route('shop.product.view',['id'=>Crypt::encrypt(2)])}}" class="title link">{{$product->name}}</a>
                                        <span class="price">₱{{number_format($product->price,2)}}</span>
                                    </div>
                                </div>

                            </div>

                            @endforeach
                        </div>
                    </div>
                    <div class="nav-sw nav-next-slider nav-next-product box-icon w_46 round"><span class="icon icon-arrow-left"></span></div>
                    <div class="nav-sw nav-prev-slider nav-prev-product box-icon w_46 round"><span class="icon icon-arrow-right"></span></div>
                </div>
            </div>
        </section>
        <!-- /Best seller -->

        <!-- Shop Collection -->
        <section class="flat-spacing-19">
            <div class="container">
                <div class="tf-grid-layout md-col-2 tf-img-with-text style-1">
                    <div class="tf-image-wrap wow fadeInUp" data-wow-delay="0s">
                        <img class="lazyload" data-src="{{asset('assets/shop/images/collections/altalumina.png')}}" src="{{asset('assets/shop/images/collections/collection-58.jpg')}}" alt="collection-img">
                    </div>
                    <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s">
                        <div class="heading">Redefining Fashion <br> Excellence</div>
                        <p class="description">Here is your chance to upgrade your wardrobe with a variation of styles</p>
                        <a href="#" class="tf-btn style-2 btn-fill rounded-full animate-hover-btn">Read our stories</a>
                    </div>
                </div>
            </div>
        </section>
        <!-- /Shop Collection -->

        <!-- Testimonial -->
        <section class="flat-testimonial-v2 py-0 wow fadeInUp" data-wow-delay="0s">
            <div class="container">
                <div class="wrapper-thumbs-testimonial-v2 type-1 flat-thumbs-testimonial">
                    <div class="box-left">
                        <div dir="ltr" class="swiper tf-sw-tes-2" data-preview="1" data-space-lg="40" data-space-md="30">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="testimonial-item lg lg-2">
                                        <div class="icon">
                                            <img class="lazyloaded" data-src="{{asset('assets/shop/images/item/quote.svg')}}" src="{{asset('assets/shop/images/item/quote.svg')}}">
                                        </div>
                                        <div class="heading fs-12 mb_18">PEOPLE ARE TALKING</div>
                                        <div class="rating">
                                            <i class="icon-star"></i>
                                            <i class="icon-star"></i>
                                            <i class="icon-star"></i>
                                            <i class="icon-star"></i>
                                            <i class="icon-star"></i>
                                        </div>
                                        <p class="text">
                                            "The shipping is always fast and the customer service team is friendly and helpful. I highly recommend this site to anyone looking for affordable clothing."
                                        </p>
                                        <div class="author box-author">
                                            <div class="box-img d-md-none rounded-0">
                                                <img class="lazyload img-product" data-src="{{asset('assets/shop/images/slider/HAND-HOLDING-PRODUCTS.jpg')}}" src="{{asset('assets/shop/images/slider/HAND-HOLDING-PRODUCTS.jpg')}}" alt="image-product">
                                            </div>
                                            <div class="content">
                                                <div class="name">Robert smith</div>
                                                <a href="#" class="metas link">Purchase item : <span>Boxy T-shirt</span></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="testimonial-item lg lg-2">
                                        <div class="icon">
                                            <img class="lazyloaded" data-src="{{asset('assets/shop/images/item/quote.svg')}}" src="{{asset('assets/shop/images/item/quote.svg')}}" alt="" src="{{asset('assets/shop/images/item/quote.svg')}}">
                                        </div>
                                        <div class="heading fs-12 mb_18">PEOPLE ARE TALKING</div>
                                        <div class="rating">
                                            <i class="icon-star"></i>
                                            <i class="icon-star"></i>
                                            <i class="icon-star"></i>
                                            <i class="icon-star"></i>
                                            <i class="icon-star"></i>
                                        </div>
                                        <p class="text">
                                            "The shipping is always fast and the customer service team is friendly and helpful. I highly recommend this site to anyone looking for affordable clothing."
                                        </p>
                                        <div class="author box-author">
                                            <div class="box-img d-md-none rounded-0">
                                                <img class="lazyload img-product" data-src="{{asset('assets/shop/images/slider/te6.jpg')}}" src="{{asset('assets/shop/images/slider/te6.jpg')}}" alt="image-product">
                                            </div>
                                            <div class="content">
                                                <div class="name">Jenifer Unix</div>
                                                <a href="#" class="metas link">Purchase item : <span> Sweetheart-neckline Top</span></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="d-md-flex d-none box-sw-navigation">
                            <div class="nav-sw nav-next-slider nav-next-tes-2"><span class="icon icon-arrow-left"></span></div>
                            <div class="nav-sw nav-prev-slider nav-prev-tes-2"><span class="icon icon-arrow-right"></span></div>
                        </div>
                        <div class="d-md-none sw-dots style-2 sw-pagination-tes-2"></div>
                    </div>
                    <div class="box-right">
                        <div dir="ltr" class="swiper tf-thumb-tes" data-preview="1" data-space="30">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="grid-img-group style-ter-1">
                                        <div class="box-img item-1 hover-img">
                                            <div class="img-style">
                                                <img class="lazyload" data-src="{{asset('assets/shop/images/slider/HAND-HOLDING-PRODUCTS.jpg')}}" src="{{asset('assets/shop/images/slider/HAND-HOLDING-PRODUCTS.jpg')}}" alt="img-slider">
                                            </div>
                                        </div>
                                        <div class="box-img item-2 hover-img">
                                            <div class="img-style">
                                                <img class="lazyload" data-src="{{asset('assets/shop/images/slider/We-Provide-Digital-Device-HIGH-RES.jpg')}}" src="{{asset('assets/shop/images/slider/We-Provide-Digital-Device-HIGH-RES.jpg')}}" alt="img-slider">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="grid-img-group style-ter-1">
                                        <div class="box-img item-1 hover-img">
                                            <div class="img-style">
                                                <img class="lazyload" data-src="{{asset('assets/shop/images/slider/DETOX-SAOP.png')}}" src="{{asset('assets/shop/images/slider/DETOX-SAOP.png')}}" alt="img-slider">
                                            </div>
                                        </div>
                                        <div class="box-img item-2 hover-img">
                                            <div class="img-style">
                                                <img class="lazyload" data-src="{{asset('assets/shop/images/slider/DROP-SHIPPING-1.jpg')}}" src="{{asset('assets/shop/images/slider/DROP-SHIPPING-1.jpg')}}" alt="img-slider">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- /Testimonial -->
<!-- Icon box -->

<section class="flat-spacing-11 flat-iconbox wow fadeInUp pb-5" data-wow-delay="0s">
    <div class="container">
        <div class="wrap-carousel wrap-mobile">
            <div dir="ltr" class="swiper tf-sw-mobile" data-preview="1" data-space="15">
                <div class="swiper-wrapper wrap-iconbox">
                    <div class="swiper-slide">
                        <div class="tf-icon-box style-border-line text-center">
                            <div class="icon">
                                <i class="icon-shipping"></i>
                            </div>
                            <div class="content">
                                <div class="title">Free Shipping</div>
                                <p>Free shipping over order $120</p>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="tf-icon-box style-border-line text-center">
                            <div class="icon">
                                <i class="icon-payment fs-22"></i>
                            </div>
                            <div class="content">
                                <div class="title">Flexible Payment</div>
                                <p>Pay with Multiple Credit Cards</p>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="tf-icon-box style-border-line text-center">
                            <div class="icon">
                                <i class="icon-return fs-22"></i>
                            </div>
                            <div class="content">
                                <div class="title">14 Day Returns</div>
                                <p>Within 30 days for an exchange</p>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="tf-icon-box style-border-line text-center">
                            <div class="icon">
                                <i class="icon-suport"></i>
                            </div>
                            <div class="content">
                                <div class="title">Premium Support</div>
                                <p>Outstanding premium support</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="sw-dots style-2 sw-pagination-mb justify-content-center"></div>
        </div>
    </div>
</section>
<!-- /Icon box -->




<!-- modal quick_add -->
<form class="add-to-cart-form">

    @csrf
    @honeypot
    <div class="modal fade modalDemo" id="quick_add_modal">
        <div class="modal-dialog modal-dialog-centered" style="max-width: min(466px, 90vw)">
            <div class="modal-content">
                <div class="header">
                    <span class="icon-close icon-close-popup" data-bs-dismiss="modal"></span>
                </div>
                <div class="wrap">
                    <input type="hidden" name="product_id">
                        <div class="tf-product-info-item">
                            <div class="image">
                                <img class="product-image">
                            </div>
                            <div class="content">
                                <a class="product-name"></a>
                                <div class="tf-product-info-price">
                                    <!-- <div class="price-on-sale">$8.00</div>
                                    <div class="compare-at-price">$10.00</div>
                                    <div class="badges-on-sale"><span>20</span>% OFF</div> -->
                                    <div class="price">₱<span class="product-price"></span></div>
                                </div>
                            </div>
                        </div>
                        <div class="tf-product-info-variant-picker mb_15">
                            <div class="variant-picker-item">
                            </div>
                        </div>
                        <div class="tf-product-info-quantity mb_15">
                            <div class="quantity-title fw-6">Quantity</div>
                            <div class="wg-quantity">
                                <span class="btn-quantity btn-decrease">-</span>
                                <input type="text" name="quantity" value="1" class="quantity-product" >
                                <span class="btn-quantity btn-increase">+</span>
                            </div>
                        </div>
                        <div class="tf-product-info-buy-button">
                            <div style="display: flex;gap: 8px;flex-wrap: wrap">
                                <button class="tf-btn btn-fill justify-content-center fw-6 fs-16 flex-grow-1 animate-hover-btn btn-add-to-cart" onclick="add_to_cart(this)">
                                    <span>Add to cart -&nbsp;</span><span class="tf-qty-price"><span class="product-total-price total-price"></span></span>
                                </button>

                                {{--<div class="w-100">
                                    <a href="#" class="btns-full">Buy with <img src="{{asset('assets/shop/images/payments/paypal.png')}}" alt=""></a>
                                    <a href="#" class="payment-more-option">More payment options</a>
                                </div>--}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </form>
    <!-- /modal quick_add -->

    <!-- modal quick_view -->
    <form class="add-to-cart-form">

        @csrf
        @honeypot
        <div class="modal fade modalDemo" id="quick_view">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="header">
                        <span class="icon-close icon-close-popup" data-bs-dismiss="modal"></span>
                    </div>
                    <div class="wrap" style="height:760px">
                        <input type="hidden" name="product_id">
                        <div class="tf-product-media-wrap">
                            <div dir="ltr" class="swiper tf-single-slide">
                                <div class="swiper-wrapper" >
                                    <div class="swiper-slide">
                                        <div class="item">
                                            <img class="product-image">
                                            <!--<img src="https://computology.xyz/storage/admin/shop-bo/products/Edward's Night Lamp-0.jpg" alt="">-->
                                        </div>
                                    </div>
                                    <!--<div class="swiper-slide">-->
                                    <!--    <div class="item">-->
                                    <!--        <img src="https://computology.xyz/storage/admin/shop-bo/products/Edward's Night Lamp-1.jpg" alt="">-->
                                    <!--    </div>-->
                                    <!--</div>-->
                                </div>
                                <!--<div class="swiper-button-next button-style-arrow single-slide-prev"></div>-->
                                <!--<div class="swiper-button-prev button-style-arrow single-slide-next"></div>-->
                            </div>
                        </div>
                        <div class="tf-product-info-wrap position-relative">
                            <div class="tf-product-info-list">
                                <div class="tf-product-info-title">
                                    <h5><a class="product-name"></a></h5>
                                </div>
                                <div class="tf-product-info-variant-picker">
                                    <div class="variant-picker-item"></div>
                                </div>
                                <div class="tf-product-info-quantity">
                                    <div class="quantity-title fw-6">Quantity</div>
                                    <div class="wg-quantity">
                                        <span class="btn-quantity btn-decrease">-</span>
                                        <input type="text" name="quantity" value="1" class="quantity-product" >
                                        <span class="btn-quantity btn-increase">+</span>
                                    </div>
                                </div>
                                <div class="tf-product-info-buy-button">
                                    <!--<form class="">-->
                                    <!--    <a href="javascript:void(0);" class="tf-btn btn-fill justify-content-center fw-6 fs-16 flex-grow-1 animate-hover-btn btn-add-to-cart"><span>Add to cart -&nbsp;</span><span class="tf-qty-price">$8.00</span></a>-->
                                    <!--</form>-->
                                    <!--<a href="javascript:void(0);" class="tf-btn btn-fill justify-content-center fw-6 fs-16 flex-grow-1 animate-hover-btn btn-add-to-cart" onclick="add_to_cart(this)">-->
                                    <!--    <span>Add to cart -&nbsp;</span><span class="tf-qty-price"><span class="product-total-price total-price"></span></span>-->
                                    <!--</a>-->
                                    <button class="tf-btn btn-fill justify-content-center fw-6 fs-16 flex-grow-1 animate-hover-btn btn-add-to-cart">
                                        <span>Add to cart -&nbsp;</span><span class="tf-qty-price"><span class="product-total-price total-price"></span></span>
                                    </button>
                                </div>
                                <div class="tf-product-info-delivery-return">
                                    <div class="row">
                                        <div class="col-xl-6 col-12">
                                            <div class="tf-product-delivery">
                                                <div class="icon">
                                                    <i class="icon-delivery-time"></i>
                                                </div>
                                                <p>Estimate delivery times: <span class="fw-7">12-26 days</span> (International), <span class="fw-7">3-6 days</span> (United States).</p>
                                            </div>
                                        </div>
                                        <div class="col-xl-6 col-12">
                                            <div class="tf-product-delivery mb-0">
                                                <div class="icon">
                                                    <i class="icon-return-order"></i>
                                                </div>
                                                <p>Return within <span class="fw-7">30 days</span> of purchase. Duties & taxes are non-refundable.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </form>
<!-- /modal quick_view -->

@endsection
@section('page_script')
@parent
<script>

    var prices  = [];
    function quick_add(el){
        let main_div        = $('#quick_add_modal');
        let button          = $(el);
        let product_id      = button.data('product-id');
        $.ajax({
           'url'        : "{{route('shop.product.get-product-info')}}/" + product_id,
           'success'    : function(product){
                console.log(product_id)
                main_div.find('input[name=product_id]').val(product_id)
                prices              = [];
                product.prices.forEach(function(price){
                    prices[price.attribute_value.value]       = price.price
                })
                let attributes_html     = '';
                let attributes          = product.attributes;
                attributes.forEach(function(attribute){
                    attributes_html += `


                        <div class="variant-picker-label">
                            ` + attribute.name + `: <span class="fw-6 variant-picker-label-value">` + attribute['attribute_values'][0]['value'] + `</span>
                        </div>
                        <div class="variant-picker-values">


                    `
                    attribute.attribute_values.forEach(function(attribute_value,attribute_value_key){
                        attributes_html += `

                            <input type="radio" onclick="change_attribute(this)" data-attribute-value="` + attribute_value.value + `" name="attribute_values_ids[` + attribute.name + `]" value="` + attribute_value.id + `"
                            id="values-` + attribute.name + `-` + attribute_value.value + `" ` + (attribute_value_key == 0 ? "checked" : "") + `>
                            <label class="style-text" for="values-` + attribute.name + `-` + attribute_value.value + `">
                                <p>` + attribute_value.value + `</p>
                            </label>
                        `
                    });
                    attributes_html += `
                        </div>
                    `
                });
                main_div.find('.variant-picker-item').html('')
                main_div.find('.variant-picker-item').append(attributes_html)
                main_div.find(".product-image").attr('src',"{{url('storage/admin/shop-bo')}}/"+product.image);
                main_div.find('.product-name').html(product.name);
                main_div.find('.product-name').attr('href',"{{route('shop.product.view')}}/" + product_id);
                main_div.find('.product-price').html(Number(product['prices'][0].price).toLocaleString(undefined,{minimumFractionDigits:2,maximumFractionDigits:2}));
                main_div.find('.quantity-product').val(1);
                main_div.find('.quantity-product').data("add-to-cart-target","product-" + product.sku);
                main_div.find('.quantity-product').data("product-price",product['prices'][0].price);
                main_div.find('.product-total-price').html('₱'+Number(product['prices'][0].price).toLocaleString(undefined,{minimumFractionDigits:2,maximumFractionDigits:2}))
                main_div.find('.btn-add-to-cart').attr('id',"product-" + product.sku)
                main_div.find('.btn-add-to-cart').data('product-id',product_id)
                main_div.find('.btn-add-to-cart').data('quantity',1)

           }



        });
    }
    function quick_view(el){
        let main_div        = $('#quick_view');
        let button          = $(el);
        let product_id      = button.data('product-id');
        $.ajax({
           'url'        : "{{route('shop.product.get-product-info')}}/" + product_id,
           'success'    : function(product){
                console.log(product_id)
                main_div.find('input[name=product_id]').val(product_id)
                prices              = [];
                product.prices.forEach(function(price){
                    prices[price.attribute_value.value]       = price.price
                })
                let attributes_html     = '';
                let attributes          = product.attributes;
                attributes.forEach(function(attribute){
                    attributes_html += `


                        <div class="variant-picker-label">
                            ` + attribute.name + `: <span class="fw-6 variant-picker-label-value">` + attribute['attribute_values'][0]['value'] + `</span>
                        </div>
                        <div class="variant-picker-values">


                    `
                    attribute.attribute_values.forEach(function(attribute_value,attribute_value_key){
                        attributes_html += `

                            <input type="radio" onclick="change_attribute(this)" data-attribute-value="` + attribute_value.value + `" name="attribute_values_ids[` + attribute.name + `]" value="` + attribute_value.id + `"
                            id="values-` + attribute.name + `-` + attribute_value.value + `" ` + (attribute_value_key == 0 ? "checked" : "") + `>
                            <label class="style-text" for="values-` + attribute.name + `-` + attribute_value.value + `">
                                <p>` + attribute_value.value + `</p>
                            </label>
                        `
                    });
                    attributes_html += `
                        </div>
                    `
                });
                main_div.find('.variant-picker-item').html('')
                main_div.find('.variant-picker-item').append(attributes_html)
                main_div.find(".product-image").attr('src',"{{url('storage/admin/shop-bo')}}/"+product.image);
                main_div.find('.product-name').html(product.name);
                main_div.find('.product-name').attr('href',"{{route('shop.product.view')}}/" + product_id);
                main_div.find('.product-price').html(Number(product['prices'][0].price).toLocaleString(undefined,{minimumFractionDigits:2,maximumFractionDigits:2}));
                main_div.find('.quantity-product').val(1);
                main_div.find('.quantity-product').data("add-to-cart-target","product-" + product.sku);
                main_div.find('.quantity-product').data("product-price",product['prices'][0].price);
                main_div.find('.product-total-price').html('₱'+Number(product['prices'][0].price).toLocaleString(undefined,{minimumFractionDigits:2,maximumFractionDigits:2}))
                main_div.find('.btn-add-to-cart').attr('id',"product-" + product.sku)
                main_div.find('.btn-add-to-cart').data('product-id',product_id)
                main_div.find('.btn-add-to-cart').data('quantity',1)

           }



        });
    }
   function change_attribute(el){

        let attribute_value         = $(el).data("attribute-value");
        let price                   = prices[attribute_value];
        if(price == undefined){
            return;
        }

        let current_quantity        = $('.quantity-product').val()
        let total_price             = price * current_quantity;
        $('.quantity-product').data('product-price',price)
        $(".product-total-price").text('₱'+total_price.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ","));
    };

    $(".btn-increase").on("click", function () {
        let quantityInput       = $(this).siblings('.quantity-product');
        let currentQuantity = parseInt(quantityInput.val());
        quantityInput.val(currentQuantity + 1);
        updateTotalPrice(this,quantityInput.val());
    });

    $(".btn-decrease").on("click", function () {
        let quantityInput       = $(this).siblings('.quantity-product');
        let currentQuantity = parseInt(quantityInput.val());
        if (currentQuantity > 1) {
            quantityInput.val(currentQuantity - 1);
            updateTotalPrice(this,quantityInput.val());
        }
    });

    function updateTotalPrice(el,quantity) {
        let product_quantity_input      = $(el).siblings('.quantity-product')
        let product_price               = product_quantity_input.data('product-price');
        let add_to_cart_button          = $("#" + product_quantity_input.data('add-to-cart-target'))
        let totalPrice = product_price * quantity;
        $(".total-price").text("₱" + totalPrice.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ","));
    }
</script>

@endsection
<!-- App js -->