
<?php $__env->startSection('title','Cusella Home Furnishing | Curtains, Sofas, Wallpapers & Interior Solutions'); ?>
<?php $__env->startSection('content'); ?>

<div class="shop-area shop-page-responsive pt-100 pb-100">
    <div class="container">
        <div class="row flex-row-reverse">
            <div class="col-lg-9">
                <div class="shop-topbar-wrapper mb-40">
                    <div class="shop-topbar-left">
                        <div class="showing-item">
                            <span id="result-count">
                                Showing <?php echo e(($meta['current_page'] - 1) * $meta['per_page'] + 1); ?>

                                –
                                <?php echo e(min($meta['current_page'] * $meta['per_page'], $meta['total'])); ?>

                                of <?php echo e($meta['total']); ?> results
                            </span>
                        </div>
                    </div>
                    <div class="shop-topbar-right">
                        <div class="shop-sorting-area">
                            <select id="sort-select">
                                <option value="relevance">Relevance</option>
                                <option value="price_low_high">Price Low → High</option>
                                <option value="price_high_low">Price High → Low</option>
                                <option value="latest">Latest</option>
                                <option value="recommended">Recommended</option>
                            </select>
                        </div>
                        <div class="shop-view-mode nav">
                            <a class="active" href="#shop-1" data-bs-toggle="tab"><i class=" ti-layout-grid3 "></i> </a>
                            <a href="#shop-2" data-bs-toggle="tab" class=""><i class=" ti-view-list-alt "></i></a>
                        </div>
                    </div>
                </div>
                <div class="shop-bottom-area">
                    <div class="tab-content jump">
                        <div id="shop-1" class="tab-pane active">
                            <div class="row" id="product-list">
                                <?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <div class="col-lg-4 col-md-4 col-sm-6 col-12">
                                    <div class="product-wrap mb-35">

                                        <div class="product-img img-zoom mb-25">
                                            <a href="<?php echo e(route('product', Str::slug($product['name']).'-'.$product['product_id'])); ?>">
                                                <img src="<?php echo e($product['image'] ?? asset('assets/images/default.png')); ?>">
                                            </a>

                                            <?php if(!empty($product['offer_price'])): ?>
                                            <div class="product-badge badge-top badge-right badge-pink">
                                                <span><?php echo e($product['offer_percent']); ?>%</span>
                                            </div>
                                            <?php endif; ?>

                                            
                                            <div class="product-action-wrap">
                                                <button class="product-action-btn-1" title="Wishlist">
                                                    <i class="pe-7s-like"></i>
                                                </button>

                                                <a href="<?php echo e(route('product', Str::slug($product['name']).'-'.$product['product_id'])); ?>" class="product-action-btn-1" title="Quick View">
                                                    <i class="pe-7s-look"></i>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="mb-1">
                                            <?php if(!empty($product['category'])): ?>
                                            <span class="text-muted">
                                                <?php echo e($product['category']); ?>

                                            </span>
                                            <?php endif; ?>

                                            <?php if(!empty($product['subcategory'])): ?>
                                            <span>
                                                > <?php echo e($product['subcategory']); ?>

                                            </span>
                                            <?php endif; ?>
                                        </div>

                                        <div class="product-content">
                                            <h3><a href="<?php echo e(route('product', Str::slug($product['name']).'-'.$product['product_id'])); ?>">
                                                    <?php echo e($product['name']); ?>

                                                </a></h3>

                                            <div class="product-price">
                                                <span class="old-price">₹<?php echo e($product['price']); ?> </span>
                                                <span>₹<?php echo e($product['offer_price']); ?></span>
                                            </div>


                                        </div>

                                    </div>
                                </div>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </div>
                            <div class="pagination-style-1" id="pagination">
                                <ul>
                                    <?php for($i = 1; $i <= $meta['last_page']; $i++): ?>
                                        <li>
                                        <a href="<?php echo e(request()->fullUrlWithQuery(['page' => $i])); ?>"
                                            class="<?php echo e($meta['current_page'] == $i ? 'active' : ''); ?>">
                                            <?php echo e($i); ?>

                                        </a>
                                        </li>
                                        <?php endfor; ?>
                                </ul>
                            </div>
                        </div>
                        <div id="shop-2" class="tab-pane">
                            <?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="shop-list-wrap mb-30">
                                <div class="row">
                                    <div class="col-lg-4 col-sm-5">
                                        <div class="product-list-img">
                                            <a href="<?php echo e(route('product', Str::slug($product['name']).'-'.$product['product_id'])); ?>">
                                                <img src="<?php echo e($product['image'] ?? asset('assets/images/default.png')); ?>" alt=" <?php echo e($product['name']); ?>">
                                            </a>

                                            <?php if(!empty($product['offer_price'])): ?>
                                            <div class="product-list-badge badge-right badge-pink">
                                                <span><?php echo e($product['offer_percent']); ?>%</span>
                                            </div>
                                            <?php endif; ?>

                                            <div class="product-list-quickview">
                                                <button class="product-action-btn-2" title="Quick View">
                                                    <i class="pe-7s-look"></i>
                                                </button>
                                            </div>
                                        </div>




                                    </div>

                                    <div class="col-lg-8 col-sm-7">
                                        <div class="mb-3">
                                            <?php if(!empty($product['category'])): ?>
                                            <span class="text-muted">
                                                <?php echo e($product['category']); ?>

                                            </span>
                                            <?php endif; ?>

                                            <?php if(!empty($product['subcategory'])): ?>
                                            <span>
                                                > <?php echo e($product['subcategory']); ?>

                                            </span>
                                            <?php endif; ?>
                                        </div>
                                        <div class="shop-list-content">
                                            <h3><a href="<?php echo e(route('product', Str::slug($product['name']).'-'.$product['product_id'])); ?>">
                                                    <?php echo e($product['name']); ?>

                                                </a></h3>

                                            <div class="product-price">
                                                <span class="old-price">₹<?php echo e($product['price']); ?> </span>
                                                <span>₹<?php echo e($product['offer_price']); ?></span>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="sidebar-wrapper">
                    <div class="sidebar-widget mb-40" data-aos="fade-up">
                        <div class="search-wrap-2">
                            <input type="text"
                                id="search-input"
                                name="search"
                                placeholder="Search..."
                                value="<?php echo e(request('search')); ?>"
                                class="form-control">
                        </div>
                    </div>
                    <div class="sidebar-widget sidebar-widget-border mb-40 pb-35">
                        <div class="sidebar-widget-title mb-30">
                            <h3>Filter By Price</h3>
                        </div>

                        <div class="price-filter">
                            <div class="price-slider-amount">

                                <div class="label-input" style="display:flex; gap:10px;">
                                    <input type="number"
                                        id="min_price"
                                        placeholder="Min"
                                        value="<?php echo e(request('min_price')); ?>"
                                        class="form-control">

                                    <input type="number"
                                        id="max_price"
                                        placeholder="Max"
                                        value="<?php echo e(request('max_price')); ?>"
                                        class="form-control">
                                </div>

                                <button type="button"
                                    id="price-filter-btn"
                                    class="btn btn-primary mt-2">
                                    Apply
                                </button>

                            </div>
                        </div>
                    </div>
                    <div class="sidebar-widget sidebar-widget-border mb-40 pb-35">
                        <div class="sidebar-widget-title mb-25">
                            <h3>Product Subcategories</h3>
                        </div>

                        <div class="sidebar-list-style">
                            <ul>

                                <?php $__currentLoopData = $sub_categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $sub): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <li>
                                    <label class="filter-item">
                                        <input type="checkbox"
                                            class="filter-checkbox"
                                            name="subcategory_id[]"
                                            value="<?php echo e($sub['id']); ?>"
                                            <?php echo e((isset($selected_subcategory) && $selected_subcategory == $sub['id']) ? 'checked' : ''); ?>>
                                        <span><?php echo e($sub['name']); ?></span>
                                    </label>
                                </li>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                            </ul>
                        </div>
                    </div>
                    <div class="sidebar-widget sidebar-widget-border mb-40 pb-35" data-aos="fade-up">
                        <div class="sidebar-widget-title mb-25">
                            <h3>Room</h3>
                        </div>
                        <div class=" sidebar-list-style">
                            <ul>
                                <?php $__currentLoopData = $rooms; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $room): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <li>
                                    <label class="filter-item">
                                        <input type="checkbox" class="filter-checkbox" name="room_id[]" value="<?php echo e($room['id']); ?>">
                                        <span> <?php echo e($room['name']); ?></span>
                                    </label>
                                </li>

                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </ul>
                        </div>
                    </div>

                    <div class="sidebar-widget" data-aos="fade-up">
                        <div class="sidebar-widget-title mb-25">
                            <h3>Tags</h3>
                        </div>
                        <div class="sidebar-list-style">
                            <ul>
                                <?php $__currentLoopData = $tags; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $tag): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <li>
                                    <label class="filter-item">
                                        <input type="checkbox" class="filter-checkbox" name="tag_id[]" value="<?php echo e($tag['id']); ?>">
                                        <span><?php echo e($tag['name']); ?></span>
                                    </label>
                                </li>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
const productBaseUrl = "<?php echo e(url('/product')); ?>";

// ✅ SLUG FUNCTION
function slugify(text) {
    return text.toString().toLowerCase()
        .replace(/\s+/g, '-')
        .replace(/[^\w\-]+/g, '')
        .replace(/\-\-+/g, '-')
        .replace(/^-+/, '')
        .replace(/-+$/, '');
}
function getFilters(page = 1) {

    let data = {
        search: $('#search-input').val(),
        min_price: $('#min_price').val(),
        max_price: $('#max_price').val(),
        sort: $('#sort-select').val(),
        page: page,
        subcategory_id: [],
        room_id: [],
        tag_id: []
    };

    $('.filter-checkbox:checked').each(function () {
        let name = $(this).attr('name');

        if (name === 'subcategory_id[]') data.subcategory_id.push($(this).val());
        if (name === 'room_id[]') data.room_id.push($(this).val());
        if (name === 'tag_id[]') data.tag_id.push($(this).val());
    });

    $.ajax({
        url: "<?php echo e(route('filter-products')); ?>",
        type: "GET",
        data: data,

        beforeSend: function () {
            $('#product-list').html('<p>Loading...</p>');
            $('#shop-2').html('<p>Loading...</p>');
        },

        success: function (res) {

            let gridHtml = '';
            let listHtml = '';

            if (res.products.length === 0) {

                gridHtml = '<p>No products found</p>';
                listHtml = '<p>No products found</p>';

            } else {

                $.each(res.products, function (i, product) {

                    let url = `${productBaseUrl}/${slugify(product.name)}-${product.product_id}`;

                    // ✅ GRID VIEW
                    gridHtml += `
<div class="col-lg-4 col-md-4 col-sm-6 col-12">
    <div class="product-wrap mb-35">

        <div class="product-img img-zoom mb-25">
            <a href="${url}">
                <img src="${product.image ?? '/assets/images/default.png'}">
            </a>

            ${
                product.offer_price
                ? `<div class="product-badge badge-top badge-right badge-pink">
                        <span>${product.offer_percent}%</span>
                   </div>`
                : ''
            }

            <div class="product-action-wrap">
                <button class="product-action-btn-1">
                    <i class="pe-7s-like"></i>
                </button>

                <a href="${url}" class="product-action-btn-1">
                    <i class="pe-7s-look"></i>
                </a>
            </div>
        </div>

        <div class="mb-1 text-muted">
            ${product.category ?? ''}
            ${product.subcategory ? ' > ' + product.subcategory : ''}
        </div>

        <div class="product-content">
            <h3><a href="${url}">${product.name}</a></h3>

            <div class="product-price">
                ${
                    product.price && product.offer_price && product.price > product.offer_price
                    ? `<span class="old-price">₹${product.price}</span>`
                    : ''
                }
                <span>₹${product.offer_price ?? product.price ?? ''}</span>
            </div>
        </div>

    </div>
</div>`;

                    // ✅ LIST VIEW
                    listHtml += `
<div class="shop-list-wrap mb-30">
    <div class="row">

        <div class="col-lg-4 col-sm-5">
            <div class="product-list-img">
                <a href="${url}">
                    <img src="${product.image ?? '/assets/images/default.png'}">
                </a>

                ${
                    product.offer_price
                    ? `<div class="product-list-badge badge-right badge-pink">
                            <span>${product.offer_percent}%</span>
                       </div>`
                    : ''
                }
                    
                                            <div class="product-list-quickview">
                                                <button class="product-action-btn-2" title="Quick View">
                                                    <i class="pe-7s-look"></i>
                                                </button>
                                            </div>
            </div>
        </div>

        <div class="col-lg-8 col-sm-7">

            <div class="mb-2 text-muted">
                ${product.category ?? ''}
                ${product.subcategory ? ' > ' + product.subcategory : ''}
            </div>

            <div class="shop-list-content">
                <h3><a href="${url}">${product.name}</a></h3>

                <div class="product-price">
                    ${
                        product.price && product.offer_price && product.price > product.offer_price
                        ? `<span class="old-price">₹${product.price}</span>`
                        : ''
                    }
                    <span>₹${product.offer_price ?? product.price ?? ''}</span>
                </div>
            </div>

        </div>

    </div>
</div>`;
                });
            }

            $('#product-list').html(gridHtml);
            $('#shop-2').html(listHtml);

            // ✅ PAGINATION
            let pagination = '';
            for (let i = 1; i <= res.meta.last_page; i++) {
                pagination += `
<li>
    <a href="javascript:void(0)" onclick="getFilters(${i})"
       class="${res.meta.current_page == i ? 'active' : ''}">
        ${i}
    </a>
</li>`;
            }

            $('#pagination').html('<ul>' + pagination + '</ul>');
        }
    });
}

// ✅ EVENTS
$('#sort-select').on('change', () => getFilters());

$(document).on('change', '.filter-checkbox', () => getFilters());

let timer;
$('#search-input').on('keyup', function () {
    clearTimeout(timer);
    timer = setTimeout(() => getFilters(), 500);
});

$('#price-filter-btn').on('click', () => getFilters());

</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layout.template', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\cusella-ecommerce\laravel\resources\views/product-list.blade.php ENDPATH**/ ?>