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

@section('content')
    <div class="collection-header">
        <div class="collection-hero">
            @if ($categorybanner != null)
                <div class="collection-hero__image"><img class="blur-up lazyload img-fluid"
                        data-src="{{ asset('admin/assets/img/category/banner/' . $categorybanner->image) }}" /></div>
                <div class="collection-hero__title-wrapper">
                    <h1 class="collection-hero__title page-width"
                        style="padding-top: 10%;font-family: 'Montserrat', sans-serif;" hidden>
                        <strong>{{ $categorybanner->title }}</h1>
                </div>
            @else
                <div class="collection-hero__image"><img class="blur-up lazyload"
                        data-src="{{ asset('assets/images/allproductimg.jpeg') }}" style="height:auto;" /></div>
            @endif
        </div>
    </div>

    <div class="container-fluid" style="padding-left: 5%;padding-right:5%">
        <div class="row py-4">
            <!--Sidebar-->
            <div class="col-12 col-sm-12 col-md-3 col-lg-2 ">
                <div class="closeFilter d-block d-md-none d-lg-none"><i class="icon icon anm anm-times-l"></i></div>
                <div class="sidebar_tags">
                    <!--Categories-->
                    <div class="sidebar_widget categories filter-widget">
                        <div class="widget-title">
                            <h2>Categories</h2>
                        </div>
                        <div class="widget-content">
                            <ul class="sidebar_categories">
                                @php
                                    $categoryData = App\Models\Category::where('status', 1)->get();
                                @endphp
                                @foreach ($categoryData as $category)
                                    <li class="lvl-1"><a
                                            href="{{ route('american.plastic.web.view.categories.product', ['name' => Str::slug($category->category_name)]) }}?id={{ $category->id }}"
                                            class="site-nav"
                                            style="font-family: 'Montserrat', sans-serif;font-weight:450">{{ $category->category_name }}</a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    <!--Categories-->
                    <!--Price Filter-->
                    <div class="sidebar_widget filterBox filter-widget">
                        <div class="widget-title">
                            <h2>Price</h2>
                        </div>
                        <form action="{{ route('american.plastic.web.product.price.filter') }}" method="post"
                            class="price-filter" id="price-filter-form">
                            @csrf
                            <!-- Hidden input fields to store price range values -->
                            <input type="hidden" name="min_price" id="min_price" value="">
                            <input type="hidden" name="max_price" id="max_price" value="">

                            <div id="slider-range"
                                class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
                                <div class="ui-slider-range ui-widget-header ui-corner-all"></div>
                                <span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0"></span>
                                <span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0"></span>
                            </div>
                            <div class="input-group">
                                <input type="text" class="form-control" id="amount">
                                <button class="btn btn-primary" type="submit">Filter</button>
                            </div>
                        </form>
                        <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
                        <script>
                            $(function() {
                                // Initialize the slider
                                $("#slider-range").slider({
                                    range: true,
                                    min: 1,
                                    max: 10000, // Set your maximum price value here
                                    values: [1, 10000], // Initial values for the slider range
                                    slide: function(event, ui) {
                                        $("#amount").val("LKR" + ui.values[0] + " -" + ui.values[1]);
                                        // Update the hidden input fields with the selected range values
                                        $("#min_price").val(ui.values[0]);
                                        $("#max_price").val(ui.values[1]);
                                    }
                                });
                                // Set initial value for amount input
                                $("#amount").val("LKR" + $("#slider-range").slider("values", 0) +
                                    " - " + $("#slider-range").slider("values", 1));
                            });
                        </script>

                    </div>
                    <!--End Price Filter-->
                    <!--Size Swatches-->
                    <div class="sidebar_widget filterBox filter-widget size-swacthes" hidden>
                        <div class="widget-title">
                            <h2>Size</h2>
                        </div>
                        <div class="filter-color swacth-list">
                            <ul>
                                <li><span class="swacth-btn" data-size="1L">1L</span></li>
                                <li><span class="swacth-btn" data-size="2L">2L</span></li>
                                <li><span class="swacth-btn" data-size="3L">3L</span></li>
                                <li><span class="swacth-btn" data-size="5L">5L</span></li>
                                <li><span class="swacth-btn" data-size="7L">7L</span></li>
                                <li><span class="swacth-btn" data-size="9L">9L</span></li>
                                <li><span class="swacth-btn" data-size="11L">11L</span></li>
                                <li><span class="swacth-btn" data-size="15L">15L</span></li>
                                <li><span class="swacth-btn" data-size="20L">20L</span></li>
                                <li><span class="swacth-btn" data-size="25L">25L</span></li>
                                <li><span class="swacth-btn" data-size="50L">50L</span></li>
                                <li><span class="swacth-btn" data-size="50L">75L</span></li>
                                <li><span class="swacth-btn" data-size="100L">100L</span></li>
                            </ul>
                        </div>
                        <script>
                            document.addEventListener('DOMContentLoaded', function() {
                                const sizeButtons = document.querySelectorAll('.swacth-btn');

                                sizeButtons.forEach(button => {
                                    button.addEventListener('click', function() {
                                        // Remove 'checked' class from all buttons
                                        sizeButtons.forEach(btn => btn.classList.remove('checked'));
                                        // Add 'checked' class to the clicked button
                                        this.classList.add('checked');

                                        // Get the selected size
                                        const selectedSize = this.getAttribute('data-size');

                                        // Update the URL with the selected size
                                        updateUrlWithSize(selectedSize);
                                    });
                                });

                                function updateUrlWithSize(size) {
                                    const url = new URL(window.location.href);
                                    url.searchParams.set('size', size);
                                    window.location.href = url.toString();
                                }
                            });
                        </script>
                        <script>
                            // Function to parse URL parameters
                            function getUrlParameter(name) {
                                name = name.replace(/[[]/, '\\[').replace(/[\]]/, '\\]');
                                var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
                                var results = regex.exec(location.search);
                                return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
                            };

                            // Get the 'color' parameter from the URL
                            var sizeParam = getUrlParameter('size');

                            // If a color parameter is provided and matches a color button, set it as checked
                            if (sizeParam) {
                                var sizeButtons = document.querySelectorAll('.swacth-btn');
                                sizeButtons.forEach(button => {
                                    if (button.dataset.size === sizeParam) {
                                        button.classList.add('checked');
                                    }
                                });
                            }
                        </script>
                    </div>
                    <!--End Size Swatches-->
                    <!--Color Swatches-->
                    <div class="sidebar_widget filterBox filter-widget">
                        <div class="widget-title">
                            <h2>Color</h2>
                        </div>
                        <div class="filter-color swacth-list clearfix">
                            <span class="swacth-btn color-btn black " data-color="Black"></span>
                            <span class="swacth-btn color-btn white" data-color="White"></span>
                            <span class="swacth-btn color-btn red" data-color="Red"></span>
                            <span class="swacth-btn color-btn blue" data-color="Blue"></span>
                            <span class="swacth-btn color-btn pink" data-color="Babypink"></span>
                            <span class="swacth-btn color-btn gray" data-color="Gray"></span>
                            <span class="swacth-btn color-btn green" data-color="Green"></span>
                            <span class="swacth-btn color-btn orange" data-color="Orange"></span>
                            <span class="swacth-btn color-btn yellow" data-color="Yellow"></span>
                            <span class="swacth-btn color-btn blueviolet" data-color="Purple"></span>

                            <span class="swacth-btn color-btn darkGoldenRod" data-color="Marblegold"></span>

                        </div>
                        <script>
                            function getUrlParameter(name) {
                                name = name.replace(/[[]/, '\\[').replace(/[\]]/, '\\]');
                                var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
                                var results = regex.exec(location.search);
                                return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
                            };

                            var colorParam = getUrlParameter('color');

                            if (colorParam) {
                                var colorButtons = document.querySelectorAll('.color-btn');
                                colorButtons.forEach(button => {
                                    if (button.dataset.color === colorParam) {
                                        button.classList.add('checked');
                                    }
                                });
                            }
                        </script>
                    </div>
                    <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            const colorbtn = document.querySelectorAll('.color-btn');

                            colorbtn.forEach(button => {
                                button.addEventListener('click', function() {
                                    colorbtn.forEach(btn => btn.classList.remove('checked'));
                                    this.classList.add('checked');
                                    const selectedcolor = this.getAttribute('data-color');
                                    updateUrlWithcolor(selectedcolor);
                                });
                            });

                            function updateUrlWithcolor(color) {
                                const url = new URL(window.location.href);
                                url.searchParams.set('color', color);
                                window.location.href = url.toString();
                            }
                        });
                    </script>
                    <!--End Color Swatches-->
                    <!--Brand-->

                    <!--End Brand-->
                    <!--Popular Products-->
                    <div class="sidebar_widget">
                        <div class="widget-title">
                            <h2>Popular Products</h2>
                        </div>
                        <div class="widget-content">
                            <div class="list list-sidebar-products">
                                <div class="grid">
                                    @foreach ($popular_products as $popular)
                                        <div class="grid__item">
                                            <div class="mini-list-item">
                                                <div class="mini-view_image">
                                                    <a class="grid-view-item__link" href="#">
                                                        @php
                                                            $imageArray = explode(',', $popular->product_image);
                                                            $firstImage = $imageArray[0];
                                                        @endphp
                                                        <img class="grid-view-item__image"
                                                            src="{{ asset('admin/assets/img/product/' . $firstImage) }}"
                                                            alt="" />
                                                    </a>
                                                </div>
                                                <div class="details"> <a class="grid-view-item__title"
                                                        href="{{ route('american.plastic.web.product.details', ['name' => Str::slug($popular->product_name)]) }}?id={{ $popular->id }}"
                                                        style="font-family: 'Montserrat', sans-serif;">{{ $popular->product_name }}</a>
                                                    <div class="grid-view-item__meta"><span
                                                            class="product-price__price"><span
                                                                class="money">LKR&nbsp;{{ number_format($popular->product_price, 2) }}</span></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End Popular Products-->



                </div>
            </div>
            <!--End Sidebar-->
            <!--Main Content-->
            <div class="col-12 col-sm-12 col-md-9 col-lg-10 main-col">
                <div class="productList">
                    <!--Toolbar-->
                    <button type="button" class="btn btn-filter d-block d-md-none d-lg-none"> Product Filters</button>
                    <div class="toolbar">
                        <div class="filters-toolbar-wrapper">
                            <div class="row">
                                <div
                                    class="col-4 col-md-4 col-lg-4 filters-toolbar__item collection-view-as d-flex justify-content-start align-items-center">

                                </div>
                                <div
                                    class="col-3 col-md-4 col-lg-4 text-center filters-toolbar__item filters-toolbar__item--count d-flex justify-content-center align-items-center">

                                </div>
                                <div class="col-5 col-md-4 col-lg-4">
                                    <div class="filters-toolbar__item" style="float: right;">
                                        <label for="SortBy" class="hidden">Sort</label>
                                        <select name="SortBy" id="SortBy"
                                            class="filters-toolbar__input filters-toolbar__input--sort"
                                            onchange="window.location.href = this.value;">
                                            <option value="{{ request()->fullUrlWithQuery(['sortBy' => null]) }}">Sort By
                                            </option>
                                            <option value="{{ request()->fullUrlWithQuery(['sortBy' => 'new']) }}"
                                                {{ request('sortBy') == 'new' ? 'selected' : '' }}>New</option>
                                            <option value="{{ request()->fullUrlWithQuery(['sortBy' => 'lowtohigh']) }}"
                                                {{ request('sortBy') == 'lowtohigh' ? 'selected' : '' }}>Low to High
                                            </option>
                                            <option value="{{ request()->fullUrlWithQuery(['sortBy' => 'hightolow']) }}"
                                                {{ request('sortBy') == 'hightolow' ? 'selected' : '' }}>High to Low
                                            </option>
                                        </select>
                                        <input class="collection-header__default-sort" type="hidden" value="manual">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End Toolbar-->
                    <div class="grid-products grid--view-items">
                        <div class="row">
                            {{-- @if ($products->count() > 0) --}}
                            @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" style="font-size: 16px;">{{ 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 }}">
                                                    @if ($allproducts->qty <= 0)
                                                        <div class="position-relative">
                                                            <img src="{{ asset('admin/assets/img/product/' . $allproducts->color_image) }}"
                                                                class="img-fluid rounded thumbnail-image">


                                                            <span class="out-of-stock-label">Out of Stock</span>

                                                            <style>
                                                                .position-relative {
                                                                    position: relative;
                                                                }

                                                                .out-of-stock-label {
                                                                    position: absolute;
                                                                    top: 50%;
                                                                    left: 50%;
                                                                    transform: translate(-50%, -50%);
                                                                    background-color: rgba(255, 0, 0, 0.7);
                                                                    color: white;
                                                                    padding: 10px 20px;
                                                                    border-radius: 5px;
                                                                    font-weight: bold;
                                                                }
                                                            </style>

                                                        </div>
                                                    @else
                                                        <img src="{{ asset('admin/assets/img/product/' . $allproducts->color_image) }}"
                                                            class="img-fluid rounded thumbnail-image">
                                                    @endif
                                                </a>

                                            </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 style="font-size: 13px;font-weight:550">LKR&nbsp;{{ number_format($allproducts->cutted_price, 2) }}</del></small>
                                                    @endif
                                                </div>
                                                            <div class="installment-option" style="text-align: left">
                                            <span style="font-size: 15px;font-weight:550;color:#969292">or 3 X <span style="color: #6d6d6d;">LKR</span>
                                                {{ number_format($allproducts->product_price / 3, 2) }}&nbsp;with</span>
                                            <img src="{{ asset('assets/images/kokologo.png') }}" alt="Koko"
                                                style="height: 15px; margin-right: 5px;">

                                        </div>
                                        
                                                    <div class="installment-option" style="text-align: left">
                                            <span style="font-size: 15px;font-weight:550;color:#969292">or 3 X <span style="color: #6d6d6d;">LKR</span>
                                                {{ number_format($allproducts->product_price / 3, 2) }}&nbsp;with</span>
                                            <img src="{{ asset('assets/images/mintpaylogo.jpg') }}" alt="Mintpay"
                                                style="height: 15px; margin-right: 5px;">

                                        </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 + 20 }}&nbsp;sold</span>
                                                    @else
                                                        <span class="buy">20 sold</span>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>

                                        <style>
                                            @media (max-width: 768px) {
                                                .dress-name {
                                                    font-size: 10px;
                                                    font-weight: bold;

                                                    font-family: 'Montserrat', sans-serif;
                                                }
                                            }

                                            @media (min-width: 767px) {
                                                .dress-name {
                                                    font-size: 13px;
                                                    font-weight: bold;

                                                    font-family: 'Montserrat', sans-serif;
                                                }
                                            }

                                            .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;
                                            }








                                            .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-4', ['class' => 'pagination flex-wrap justify-content-center']) !!}
                            @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

                            {{-- @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