@extends('ecommerce::frontend.layout.main2')

@section('title') Shop - {{ $ecommerce_setting->site_title ?? 'Amna-G-Damiani' }} @endsection

@section('content')
@include('ecommerce::frontend.partials.header')

<!-- Breadcrumb -->
<div class="tf-breadcrumb">
    <div class="container">
        <div class="tf-breadcrumb-wrap d-flex justify-content-between flex-wrap align-items-center">
            <div class="tf-breadcrumb-list">
                <a href="{{ url('/') }}" class="text">Home</a>
                <i class="icon icon-arrow-right"></i>
                <span class="text">Shop</span>
            </div>
        </div>
    </div>
</div>

<!-- Shop Section -->
<section class="flat-spacing-1">
    <div class="container">
        <div class="tf-shop-content">
            <div class="row">
                
                <!-- Professional Sidebar -->
                <div class="col-xl-3 col-lg-4 col-md-12">
                    <div class="sidebar-shop sticky-top">
                        
                        <!-- Categories Widget -->
                        <div class="widget-facet wd-categories style-modern">
                            <div class="facet-title" data-bs-target="#categories" data-bs-toggle="collapse" aria-expanded="true">
                                <span class="fw-semibold">Categories</span>
                                <span class="icon icon-arrow-up"></span>
                            </div>
                            <div id="categories" class="collapse show">
                                <ul class="list-categoris">
                                    <li class="cate-item active">
                                        <a href="{{ url('/shop') }}">
                                            <i class="icon icon-grid fs-18"></i>
                                            <span>All Products</span>
                                        </a>
                                    </li>
                                    @foreach($categories as $category)
                                    @php
                                        $catProductCount = DB::table('products')
                                            ->where('category_id', $category->id)
                                            ->where('is_active', 1)
                                            ->where('is_online', 1)
                                            ->count();
                                    @endphp
                                    @if($catProductCount > 0)
                                    <li class="cate-item">
                                        <a href="{{ url('/shop') }}/{{ $category->slug }}">
                                            <i class="icon icon-arrow-right-2 fs-14"></i>
                                            <span>{{ $category->name }}</span>
                                            <span class="count-badge">{{ $catProductCount }}</span>
                                        </a>
                                    </li>
                                    @endif
                                    @endforeach
                                </ul>
                            </div>
                        </div>

                        <!-- Price Widget -->
                        <div class="widget-facet style-modern mt-4">
                            <div class="facet-title" data-bs-target="#price" data-bs-toggle="collapse" aria-expanded="true">
                                <span class="fw-semibold">Filter by Price</span>
                                <span class="icon icon-arrow-up"></span>
                            </div>
                            <div id="price" class="collapse show">
                                <ul class="price-list">
                                    <li>
                                        <a href="?price=0-2000" class="price-item">
                                            <span class="price-text">Under Rs 2,000</span>
                                            <i class="icon icon-arrow-right-2"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="?price=2000-5000" class="price-item">
                                            <span class="price-text">Rs 2,000 - Rs 5,000</span>
                                            <i class="icon icon-arrow-right-2"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="?price=5000-10000" class="price-item">
                                            <span class="price-text">Rs 5,000 - Rs 10,000</span>
                                            <i class="icon icon-arrow-right-2"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="?price=10000-999999" class="price-item">
                                            <span class="price-text">Rs 10,000+</span>
                                            <i class="icon icon-arrow-right-2"></i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <!-- Banner -->
                        <div class="sidebar-banner mt-4">
                            <div class="banner-content">
                                <h4 class="banner-title">New Collection</h4>
                                <p class="banner-subtitle">Exclusive designs just for you</p>
                                <a href="{{ url('/shop') }}" class="tf-btn btn-sm animate-hover-btn">
                                    <span>Shop Now</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Products Area -->
                <div class="col-xl-9 col-lg-8 col-md-12">
                    
                    <!-- Shop Controls -->
                    <div class="tf-shop-control grid-3 align-items-center mb-4">
                        <div class="tf-control-filter">
                            @php
                                $totalProducts = DB::table('products')->where('is_active', 1)->where('is_online', 1)->count();
                            @endphp
                            <p class="showing-text mb-0">Showing <span class="fw-bold">{{ $totalProducts }}</span> products</p>
                        </div>
                        <ul class="tf-control-layout d-flex justify-content-center">
                            <li class="tf-view-layout-switch sw-layout-3" data-value-grid="grid-3">
                                <div class="item"><span class="icon icon-grid-3"></span></div>
                            </li>
                            <li class="tf-view-layout-switch sw-layout-4 active" data-value-grid="grid-4">
                                <div class="item"><span class="icon icon-grid-4"></span></div>
                            </li>
                        </ul>
                        <div class="tf-control-sorting d-flex justify-content-end">
                            <div class="tf-dropdown-sort" data-bs-toggle="dropdown">
                                <div class="btn-select">
                                    <span class="text-sort-value">Best Selling</span>
                                    <span class="icon icon-arrow-down"></span>
                                </div>
                                <div class="dropdown-menu">
                                    <div class="select-item active"><span class="text-value-item">Best Selling</span></div>
                                    <div class="select-item"><span class="text-value-item">New Arrivals</span></div>
                                    <div class="select-item"><span class="text-value-item">Price: Low to High</span></div>
                                    <div class="select-item"><span class="text-value-item">Price: High to Low</span></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Products Grid -->
                    <div class="grid-layout wrapper-shop" data-grid="grid-4" id="products-container">
                        @php
                            $products = DB::table('products')
                                ->where('is_active', 1)
                                ->where('is_online', 1)
                                ->orderBy('created_at', 'desc')
                                ->limit(12)
                                ->get();
                        @endphp

                        @foreach($products as $product)
                        <div class="card-product fl-item">
                            <div class="card-product-wrapper">
                                <a href="{{ url('product/'.$product->slug.'/'.$product->id) }}" class="product-img">
                                    @php
                                        $images = array_filter(explode(',', $product->image));
                                        $main_image = (!empty($images[0]) && $images[0] != 'zummXD2dvAtI.png') ? $images[0] : 'no-image.jpg';
                                        $hover_image = (isset($images[1]) && !empty($images[1]) && $images[1] != $main_image) ? $images[1] : null;
                                    @endphp
                                    <img class="lazyload img-product" 
                                        data-src="{{ asset('public/images/product/'.$main_image) }}"
                                        src="{{ asset('public/images/product/'.$main_image) }}"
                                        alt="{{ $product->name }}">
                                    @if($hover_image)
                                    <img class="lazyload img-hover" 
                                        data-src="{{ asset('public/images/product/'.$hover_image) }}"
                                        src="{{ asset('public/images/product/'.$hover_image) }}"
                                        alt="{{ $product->name }}">
                                    @endif
                                </a>
                                <div class="list-product-btn">
                                    <a href="javascript:void(0);" class="box-icon bg_white quick-add tf-btn-loading add-to-cart-shop" data-id="{{ $product->id }}" title="Add to Cart">
                                        <span class="icon icon-bag"></span>
                                        <span class="tooltip">Add to cart</span>
                                    </a>
                                    <a href="javascript:void(0)" class="box-icon bg_white wishlist add-to-wishlist" data-id="{{ $product->id }}" title="Add to Wishlist">
                                        <span class="icon icon-heart"></span>
                                        <span class="tooltip">Wishlist</span>
                                    </a>
                                    <a href="{{ url('product/'.$product->slug.'/'.$product->id) }}" class="box-icon bg_white quickview" title="Quick View">
                                        <span class="icon icon-view"></span>
                                        <span class="tooltip">Quick view</span>
                                    </a>
                                </div>
                                @php
                                    $stock_qty = DB::table('product_warehouse')->where('product_id', $product->id)->sum('qty');
                                @endphp
                                @if($stock_qty <= 0)
                                <div class="on-sale-wrap"><div class="on-sale-item sold-out">Sold Out</div></div>
                                @elseif($product->promotion_price)
                                <div class="on-sale-wrap"><div class="on-sale-item">-{{ round((($product->price - $product->promotion_price) / $product->price) * 100) }}%</div></div>
                                @endif
                            </div>
                            <div class="card-product-info">
                                <a href="{{ url('product/'.$product->slug.'/'.$product->id) }}" class="title link">{{ $product->name }}</a>
                                <span class="price">
                                    @if($product->promotion_price)
                                        <span class="price-old">Rs {{ number_format($product->price, 0) }}</span>
                                        <span class="price-sale">Rs {{ number_format($product->promotion_price, 0) }}</span>
                                    @else
                                        Rs {{ number_format($product->price, 0) }}
                                    @endif
                                </span>
                            </div>
                        </div>
                        @endforeach
                    </div>

                    <!-- Load More -->
                    @if($products->count() >= 12)
                    <div class="tf-pagination-wrap view-more-button text-center mt-4">
                        <button class="tf-btn-loading tf-loading-default style-2 btn-loadmore" id="load-more-btn">
                            <span class="text">Load More Products</span>
                        </button>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('script')
<script>
$(document).ready(function(){
    var offset = 12;
    
    // Load More
    $('#load-more-btn').on('click', function() {
        var btn = $(this);
        btn.addClass('loading').find('.text').text('Loading...');
        
        $.ajax({
            url: "{{ url('all-products') }}",
            data: {offset: offset, limit: 12},
            success: function(response) {
                if (response && response.length > 0) {
                    $.each(response, function(i, p) {
                        var imgs = p.image ? p.image.split(',').filter(Boolean) : [];
                        var img1 = (imgs.length > 0 && imgs[0] != 'zummXD2dvAtI.png') ? imgs[0] : 'no-image.jpg';
                        var img2 = (imgs.length > 1 && imgs[1] != img1) ? imgs[1] : null;
                        
                        var priceHtml = p.promotion_price
                            ? '<span class="price-old">Rs ' + Number(p.price).toLocaleString() + '</span><span class="price-sale">Rs ' + Number(p.promotion_price).toLocaleString() + '</span>'
                            : 'Rs ' + Number(p.price).toLocaleString();
                        
                        var html = `<div class="card-product fl-item">
                            <div class="card-product-wrapper">
                                <a href="/product/${p.slug}/${p.id}" class="product-img">
                                    <img class="lazyload img-product" src="/public/images/product/${img1}" alt="${p.name}">
                                    ${img2 ? `<img class="lazyload img-hover" src="/public/images/product/${img2}" alt="${p.name}">` : ''}
                                </a>
                                <div class="list-product-btn">
                                    <a href="javascript:void(0);" class="box-icon bg_white quick-add add-to-cart-shop" data-id="${p.id}">
                                        <span class="icon icon-bag"></span><span class="tooltip">Add to cart</span>
                                    </a>
                                    <a href="javascript:void(0)" class="box-icon bg_white wishlist add-to-wishlist" data-id="${p.id}">
                                        <span class="icon icon-heart"></span><span class="tooltip">Wishlist</span>
                                    </a>
                                </div>
                            </div>
                            <div class="card-product-info">
                                <a href="/product/${p.slug}/${p.id}" class="title link">${p.name}</a>
                                <span class="price">${priceHtml}</span>
                            </div>
                        </div>`;
                        
                        $('#products-container').append(html);
                    });
                    offset += 12;
                    btn.removeClass('loading').find('.text').text('Load More Products');
                    if (response.length < 12) btn.hide();
                } else {
                    btn.hide();
                }
            }
        });
    });
    
    // Add to Cart
    $(document).on('click', '.add-to-cart-shop', function(e) {
        e.preventDefault();
        var btn = $(this), id = btn.data('id');
        btn.html('<span class="spinner-border spinner-border-sm"></span>');
        
        $.post("{{ route('addToCart') }}", {
            product_id: id, qty: 1, variant: 0, _token: "{{ csrf_token() }}"
        }, function(r) {
            btn.html('<span class="icon icon-check"></span>');
            $('.cart-count').html(r.total_qty);
            setTimeout(() => btn.html('<span class="icon icon-bag"></span>'), 1500);
        });
    });
    
    // Wishlist
    $(document).on('click', '.add-to-wishlist', function(e) {
        e.preventDefault();
        @if(auth()->user())
        $.get("{{url('customer/wishlist')}}/" + $(this).data('id'), function(d) {
            if(d != 'fail') {
                $('.wishlist .count').each(function() {
                    var c = parseInt($(this).text()) || 0;
                    $(this).text(c + 1).removeClass('d-none');
                });
            }
        });
        @else
        window.location.href = "{{ url('customer/login') }}";
        @endif
    });
    
    // Grid Switcher
    $('.tf-view-layout-switch').on('click', function() {
        $('.tf-view-layout-switch').removeClass('active');
        $(this).addClass('active');
        $('.wrapper-shop').attr('data-grid', $(this).data('value-grid'));
    });
});
</script>

<style>
/* BEAUTIFUL MODERN DESIGN */
.wd-categories.style-modern .list-categoris {
    padding: 0;
    margin: 0;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

.wd-categories.style-modern .cate-item {
    list-style: none;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wd-categories.style-modern .cate-item:last-child {
    border-bottom: none;
}

.wd-categories.style-modern .cate-item a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.wd-categories.style-modern .cate-item a i {
    color: #999;
    transition: all 0.3s ease;
}

.wd-categories.style-modern .cate-item a span {
    flex: 1;
}

.wd-categories.style-modern .cate-item a .count-badge {
    background: #f5f5f5;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    color: #666;
    font-weight: 600;
}

.wd-categories.style-modern .cate-item:hover a,
.wd-categories.style-modern .cate-item.active a {
    background: linear-gradient(135deg, #bb9c59 0%, #d4b574 100%);
    color: #fff;
    padding-left: 24px;
}

.wd-categories.style-modern .cate-item:hover a i,
.wd-categories.style-modern .cate-item.active a i {
    color: #fff;
    transform: translateX(4px);
}

.wd-categories.style-modern .cate-item:hover a .count-badge,
.wd-categories.style-modern .cate-item.active a .count-badge {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

/* Price List */
.widget-facet.style-modern {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.widget-facet.style-modern .facet-title {
    margin-bottom: 16px;
    cursor: pointer;
}

.price-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.price-list li {
    margin-bottom: 8px;
}

.price-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f9f9f9;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
}

.price-item:hover {
    background: linear-gradient(135deg, #bb9c59 0%, #d4b574 100%);
    color: #fff;
    transform: translateX(4px);
}

.price-item i {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.price-item:hover i {
    opacity: 1;
}

/* Sidebar Banner */
.sidebar-banner {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border-radius: 16px;
    padding: 30px 24px;
    text-align: center;
    color: #fff;
}

.sidebar-banner .banner-title {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}

.sidebar-banner .banner-subtitle {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    margin-bottom: 20px;
}

.sidebar-banner .tf-btn {
    background: #fff;
    color: #1a1a1a;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
}

.sidebar-banner .tf-btn:hover {
    background: #bb9c59;
    color: #fff;
}

/* Product Cards */
.card-product {
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.card-product:hover {
    transform: translateY(-8px);
}

.card-product-wrapper {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #f9f9f9;
    margin-bottom: 12px;
}

.card-product .product-img {
    display: block;
    position: relative;
    padding-bottom: 130%;
    overflow: hidden;
}

.card-product .product-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.card-product:hover .img-product {
    opacity: 0;
}

.card-product:hover .img-hover {
    opacity: 1;
}

/* FIXED: Perfect Icon Alignment */
/* Replace ONLY the icon alignment section in your shop.blade.php with this: */

/* FIXED: Perfect Icon Alignment - ULTRA STRONG OVERRIDE */
.list-product-btn {
    position: absolute !important;
    bottom: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 8px !important;
    opacity: 0 !important;
    transition: all 0.3s ease !important;
    z-index: 10 !important;
}

.card-product:hover .list-product-btn {
    opacity: 1 !important;
}

.list-product-btn .box-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    color: #333 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    text-align: center !important;
    overflow: hidden !important;
}

.list-product-btn .box-icon span.icon {
    font-size: 18px !important;
    line-height: 1 !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

/* Specific icon adjustments */
.list-product-btn .box-icon .icon-bag::before,
.list-product-btn .box-icon .icon-heart::before,
.list-product-btn .box-icon .icon-view::before {
    display: block !important;
    line-height: 1 !important;
}

.list-product-btn .box-icon:hover {
    background: #bb9c59 !important;
    color: #fff !important;
    transform: scale(1.15) !important;
}

/* Hide tooltips completely */
.list-product-btn .tooltip {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
/* Sale Badge */
.on-sale-item {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #e74c3c;
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    z-index: 2;
}

.on-sale-item.sold-out {
    background: #95a5a6;
}

/* Product Info */
.card-product-info {
    text-align: center;
}

.card-product-info .title {
    display: block;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    transition: color 0.3s ease;
    text-decoration: none;
}

.card-product-info .title:hover {
    color: #bb9c59;
}

.card-product-info .price {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}

.price-old {
    color: #999;
    text-decoration: line-through;
    margin-right: 8px;
    font-size: 14px;
}

.price-sale {
    color: #e74c3c;
}

/* Load More Button */
.btn-loadmore {
    background: linear-gradient(135deg, #bb9c59 0%, #d4b574 100%);
    color: #fff;
    padding: 14px 40px;
    border-radius: 30px;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
}

.btn-loadmore:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(187,156,89,0.3);
}

/* Responsive */
@media (max-width: 991px) {
    .sidebar-shop {
        margin-bottom: 30px;
    }
}
</style>


@endsection