<?php $__env->startSection('content'); ?>


    <div class="container-fluid">
        <div class="row py-4">
            <!--Main Content-->
            <div class="col-md-12" style="padding-right:5%;padding-left:5%">
                <div class="productList">
                    <div class="grid-products grid--view-items">
                        <div class="row">
                            <?php if($products->count() > 0): ?>
                                <?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $allproducts): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <div class="col-6 col-sm-6 col-md-4 col-lg-3 grid-view-item style2 item">

                                        <div class="cardd">

                                                <div class="image-container">
                                                    <div class="first">
                                                        <div class="d-flex justify-content-between align-items-center">
                                                            <?php if($allproducts->cutted_price !=null): ?>
                                                            <?php
                                                            $cuttedprice_featured = $allproducts->cutted_price;
                                                            $productprice_featured = $allproducts->product_price;
                                                            $percentage_featured =
                                                                (($cuttedprice_featured - $productprice_featured) /
                                                                    $cuttedprice_featured) *
                                                                100;
                                                        ?>
                                                        <span class="discount"><?php echo e(floor($percentage_featured)); ?>%</span>
                                                        <?php else: ?>
                                                        <span class="discount" hidden></span>
                                                            <?php endif; ?>
                                                            <?php if(Auth::check()): ?>
                                                            <?php
                                                            $user=Auth::user();
                                                                $productexists=App\Models\Wishlist::where('user_id',$user->id)->where('product_id',$allproducts->id)->exists();
                                                            ?>
                                                            <?php if($productexists): ?>
                                                            <span class="wishlist"><i class="fa fa-heart" style="color: #ce1111"></i></span>
                                                            <?php else: ?>
                                                            <a
                                                            href="<?php echo e(route('american.plastic.web.addto.wishlist', ['id' => $allproducts->id])); ?>"
                                                            title="Add to Wishlist">
                                                            <span class="wishlist"><i class="fa fa-heart-o"></i></span>
                                                        </a>
                                                            <?php endif; ?>
                                                           <?php else: ?>
                                                           <span class="wishlist"><i class="fa fa-heart-o"></i></span>
                                                          <?php endif; ?>
                                                          </div>
                                                    </div>
                                                    <?php
                                                        $imageArray = explode(',', $allproducts->product_image);
                                                        $firstImage = $imageArray[0];
                                                    ?>
                                                        <a href="<?php echo e(route('american.plastic.web.product.details', ['name' => Str::slug($allproducts->product_name)])); ?>?id=<?php echo e($allproducts->id); ?>"
                                                           >
                                                    <img src="<?php echo e(asset('admin/assets/img/product/' . $firstImage)); ?>"
                                                        class="img-fluid rounded thumbnail-image">
                                                        </a>
                                                    
                                                </div>

                                            <div class="product-detail-container p-2">
                                                <div class="d-flex justify-content-between">
                                                    <h5 class="dress-name"><?php echo e($allproducts->product_name); ?></h5>
                                                </div>
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <span
                                                        class="new-price"><strong>LKR&nbsp;<?php echo e(number_format($allproducts->product_price, 2)); ?></strong></span>
                                                    <?php if($allproducts->cutted_price != null): ?>
                                                        <small
                                                            class="old-price text-right"><del>LKR&nbsp;<?php echo e(number_format($allproducts->cutted_price, 2)); ?></del></small>
                                                    <?php endif; ?>
                                                </div>
                                                <div class="d-flex justify-content-between align-items-center pt-1">
                                                    <div>
                                                        <i class="fa fa-star-o rating-star"></i>
                                                        <span class="rating-number">4.8</span>
                                                    </div>
                                                    <?php if($allproducts->order > 0): ?>
                                                    <span class="buy"><?php echo e($allproducts->order); ?>&nbsp;sold</span>
                                                    <?php else: ?>
                                                    <span class="buy">0 sold</span>
                                                    <?php endif; ?>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mt-3" hidden>
                                            <div class="card voutchers">
                                                <div class="voutcher-divider">
                                                    <div class="voutcher-left text-center">
                                                        <span class="voutcher-name">Latest</span>
                                                        <h5 class="voutcher-code">Buy Now</h5>
                                                    </div>
                                                    <div class="voutcher-right text-center border-left"
                                                        style="font-size: 20px;padding:4%">
                                                        <i class="fas fa-shopping-cart"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <style>
                                            .image-container {
                                                position: relative;
                                                width: 100%;
                                                overflow: hidden;
                                                /* Ensure the image does not overflow the container */
                                            }

                                            .image-container img {
                                                width: 100%;
                                                height: auto;
                                                /* Maintain the aspect ratio */
                                                display: block;
                                            }

                                            .cardd {

                                                background-color: #fff;
                                                border: none;
                                                border-radius: 10px;
                                                width: 100%;
                                                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

                                            }

                                            .image-container {

                                                position: relative;
                                            }

                                            .thumbnail-image {
                                                border-radius: 10px !important;
                                            }


                                            .discount {

                                                background-color: red;
                                                padding-top: 1px;
                                                padding-bottom: 1px;
                                                padding-left: 4px;
                                                padding-right: 4px;
                                                font-size: 10px;
                                                border-radius: 6px;
                                                color: #fff;
                                            }

                                            .wishlist {

                                                height: 25px;
                                                width: 25px;
                                                background-color: #eee;
                                                display: flex;
                                                justify-content: center;
                                                align-items: center;
                                                border-radius: 50%;
                                                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                                            }

                                            .first {

                                                position: absolute;
                                                width: 100%;
                                                padding: 9px;
                                            }


                                            .dress-name {
                                                font-size: 13px;
                                                font-weight: bold;

                                            }





                                            .item-size {
                                                width: 15px;
                                                height: 15px;
                                                border-radius: 50%;
                                                background: #fff;
                                                border: 1px solid grey;
                                                color: grey;
                                                font-size: 10px;
                                                text-align: center;
                                                align-items: center;
                                                display: flex;
                                                justify-content: center;
                                            }


                                            .rating-star {
                                                font-size: 10px !important;
                                            }

                                            .rating-number {
                                                font-size: 10px;
                                                color: grey;

                                            }

                                            .buy {
                                                font-size: 12px;
                                                color: purple;
                                                font-weight: 500;
                                            }

                                            .voutchers {
                                                background-color: #fff;
                                                border: none;
                                                border-radius: 10px;
                                                width: 100%;
                                                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                                                overflow: hidden;

                                            }

                                            .voutcher-divider {

                                                display: flex;

                                            }

                                            .voutcher-left {
                                                width: 60%
                                            }

                                            .voutcher-name {
                                                color: grey;
                                                font-size: 9px;
                                                font-weight: 500;
                                            }

                                            .voutcher-code {
                                                color: rgb(0, 0, 0);
                                                font-size: 14px;
                                                font-weight: bold;
                                            }

                                            .voutcher-right {
                                                width: 40%;
                                                background-color: red;
                                                color: #fff;
                                            }

                                            .discount-percent {
                                                font-size: 12px;
                                                font-weight: bold;
                                                position: relative;
                                                top: 5px;
                                            }

                                            .off {
                                                font-size: 14px;
                                                position: relative;
                                                bottom: 5px;
                                            }

                                            .collection-grid-item {
                                                padding: 5%;
                                            }

                                            .image-container {
                                                position: relative;
                                            }

                                            .lottie-container {
                                                position: absolute;
                                                top: 20px;
                                                /* Adjust to position within the image */
                                                right: 20px;
                                                /* Adjust to position within the image */
                                                width: 50px;
                                                height: 50px;
                                                z-index: 10;
                                            }

                                            @media (min-width: 768px) {
                                                .collection-grid-item {
                                                    padding: 3%;
                                                }
                                            }

                                            /* Large screens (desktops) */
                                            @media (min-width: 1024px) {
                                                .collection-grid-item {
                                                    padding: 2%;
                                                }
                                            }

                                            /* Extra large screens */
                                            @media (min-width: 1200px) {
                                                .collection-grid-item {
                                                    padding: 1%;
                                                }
                                            }
                                        </style>
                                    </div>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                <?php echo $products->withQueryString()->links('pagination::bootstrap-5'); ?>

                            <?php else: ?>
                                <div class="no-products-container">
                                    <h4>Products Not Available!</h4>
                                    <p>We’re sorry, but the products you are looking for are currently out of stock. Please
                                        check back later or explore our other offerings.</p>
                                    <a href="<?php echo e(route('american.plastic.web')); ?>" class="btn">Go to Homepage</a>
                                </div>
                                <style>
                                    .no-products-container {
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        text-align: center;
                                        background-color: #f8f9fa;
                                        padding: 50px;
                                        border-radius: 10px;
                                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                                    }

                                    .no-products-container h4 {
                                        font-size: 24px;
                                        color: #333;
                                        margin-bottom: 20px;
                                    }

                                    .no-products-container p {
                                        font-size: 16px;
                                        color: #666;
                                        margin-bottom: 30px;
                                    }

                                    .no-products-container .btn {
                                        text-decoration: none;
                                        color: #fff;
                                        background-color: #007bff;
                                        padding: 10px 20px;
                                        border-radius: 5px;
                                        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                                        transition: background-color 0.3s ease;
                                    }

                                    .no-products-container .btn:hover {
                                        background-color: #0056b3;
                                    }
                                </style>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                <!--End Main Content-->
            </div>
        </div>
    </div>
    <!--End Body Content-->

<?php $__env->stopSection(); ?>

<?php echo $__env->make('web.home.layout.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/amerbofz/public_html/resources/views/web/home/deals/deals.blade.php ENDPATH**/ ?>