@extends('web.home.layout.master')

@section('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">
                            @if ($products->count() > 0)
                                @foreach ($products as $allproducts)
                                    <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">
                                                            @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;
                                                        @endphp
                                                        <span class="discount">{{ floor($percentage_featured) }}%</span>
                                                        @else
                                                        <span class="discount" hidden></span>
                                                            @endif
                                                            @if(Auth::check())
                                                            @php
                                                            $user=Auth::user();
                                                                $productexists=App\Models\Wishlist::where('user_id',$user->id)->where('product_id',$allproducts->id)->exists();
                                                            @endphp
                                                            @if($productexists)
                                                            <span class="wishlist"><i class="fa fa-heart" style="color: #ce1111"></i></span>
                                                            @else
                                                            <a
                                                            href="{{ 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>
                                                            @endif
                                                           @else
                                                           <span class="wishlist"><i class="fa fa-heart-o"></i></span>
                                                          @endif
                                                          </div>
                                                    </div>
                                                    @php
                                                        $imageArray = explode(',', $allproducts->product_image);
                                                        $firstImage = $imageArray[0];
                                                    @endphp
                                                        <a href="{{ route('american.plastic.web.product.details', ['name' => Str::slug($allproducts->product_name)]) }}?id={{ $allproducts->id }}"
                                                           >
                                                    <img src="{{ asset('admin/assets/img/product/' . $firstImage) }}"
                                                        class="img-fluid rounded thumbnail-image">
                                                        </a>
                                                    {{-- @if ($allproducts->cutted_price != null)
                                                        <div class="lottie-container">
                                                            <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>

                                                            <dotlottie-player
                                                                src="https://lottie.host/e270bb41-6464-4d96-8071-50bcda1e4363/k1Rr7XQTRK.json"
                                                                background="transparent" speed="1"
                                                                style="width: 100px; height: 100px;" loop autoplay>
                                                            </dotlottie-player>
                                                        </div>
                                                    @endif --}}
                                                </div>

                                            <div class="product-detail-container p-2">
                                                <div class="d-flex justify-content-between">
                                                    <h5 class="dress-name">{{ $allproducts->product_name }}</h5>
                                                </div>
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <span
                                                        class="new-price"><strong>LKR&nbsp;{{ number_format($allproducts->product_price, 2) }}</strong></span>
                                                    @if ($allproducts->cutted_price != null)
                                                        <small
                                                            class="old-price text-right"><del>LKR&nbsp;{{ number_format($allproducts->cutted_price, 2) }}</del></small>
                                                    @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>
                                                    @if($allproducts->order > 0)
                                                    <span class="buy">{{ $allproducts->order }}&nbsp;sold</span>
                                                    @else
                                                    <span class="buy">0 sold</span>
                                                    @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>
                                @endforeach
                                {!! $products->withQueryString()->links('pagination::bootstrap-5') !!}
                            @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="{{ 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>
                            @endif
                        </div>
                    </div>
                </div>
                <!--End Main Content-->
            </div>
        </div>
    </div>
    <!--End Body Content-->

@endsection