<?php echo $header; ?>
<div class="container-fluid p-0 bread_backg">
    <? if ($description): ?>
        <div class="container hidden-xs">
            <?= $description; ?>
        </div>
    <? endif; ?>
    <div class="container">
        <ul class="breadcrumb">
            <?php foreach ($breadcrumbs as $breadcrumb) { ?>
                <li><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a></li>
            <?php } ?>
        </ul>
    </div>
</div>
<div class="container">
    <div class="row"><?php echo $column_left; ?>
        <?php if ($column_left && $column_right) { ?>
            <?php $class = 'col-sm-6'; ?>
        <?php } elseif ($column_left || $column_right) { ?>
            <?php $class = 'col-sm-9'; ?>
        <?php } else { ?>
            <?php $class = 'col-sm-12'; ?>
        <?php } ?>
        <div id="content" class="text-center <?php echo $class; ?> category-page"><?php echo $content_top; ?>
            <h1 class="h1_category"><?php echo $heading_title; ?></h1>
<div class="row d-none">
                <div class="col-md-2 col-sm-6 hidden-xs">
                    <div class="btn-group btn-group-sm">
                        <button type="button" id="list-view" class="btn btn-default" data-toggle="tooltip" title="<?php echo $button_list; ?>"><i class="fa fa-th-list"></i></button>
                        <button type="button" id="grid-view" class="btn btn-default" data-toggle="tooltip" title="<?php echo $button_grid; ?>"><i class="fa fa-th"></i></button>
                    </div>
                </div>
            </div>
<div class="row" id="show_data">
</div>
<?php echo $content_bottom; ?></div>
        <?php echo $column_right; ?></div>
</div>
<script>
    setTimeout(function () {
$.ajax({
            url: '<?php echo HTTPS_SERVER ?>index.php?route=product/search/showproducts',
            dataType: 'json',
            type: 'GET',
            success: function (json) {
                //console.log(json['result']);
                $('#show_data').html(json['result']);
var cols = $('#column-right, #column-left').length;
if (cols == 2) {
                    $('#content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-6 col-sm-12 col-xs-12');
                    $('#content .product-list:nth-child(3n+1)').addClass('first-item');
                    $('#content .product-list:nth-child(3n+3)').addClass('last-item');
                } else if (cols == 1) {
                    $('#content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-4 col-sm-4 col-xs-6');
                    $('#content .product-list:nth-child(4n+1)').addClass('first-item');
                    $('#content .product-list:nth-child(4n+4)').addClass('last-item');
                    if (document.documentElement.clientWidth < 1200 && document.documentElement.clientWidth > 991) {
                        $('#content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-4 col-sm-4 col-xs-12');
                        $('#content .product-list:nth-child(3n+1)').addClass('first-item');
                        $('#content .product-list:nth-child(3n+3)').addClass('last-item');
                    }
                    if (document.documentElement.clientWidth < 992 && document.documentElement.clientWidth > 767) {
                        $('#content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-4 col-sm-4 col-xs-12');
                        $('#content .product-list:nth-child(2n+1)').addClass('first-item');
                        $('#content .product-list:nth-child(2n+2)').addClass('last-item');
                    }
                    if (document.documentElement.clientWidth < 768) {
                        $('#content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-4 col-sm-6 col-xs-6');
                        $('#content .product-list:nth-child(2n+1)').addClass('first-item');
                        $('#content .product-list:nth-child(2n+2)').addClass('last-item');
                    }
                    if (document.documentElement.clientWidth < 479) {
                        $('#content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-6 col-sm-12 col-xs-12 last-item');
                        $('#content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-6 col-sm-12 col-xs-12 last-item');
                    }
                } else {
                    $('#content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-6');
                    $('#content .product-list:nth-child(3n+1)').addClass('first-item');
                    $('#content .product-list:nth-child(3n+3)').addClass('last-item');
                }
$('#list-view').removeClass('active');
                $('#grid-view').addClass('active');
localStorage.setItem('display', 'grid');
//setInterval(function () {
                $('.product-layout').removeClass('d-none');
                // window.dispatchEvent(new Event('resize'));
                // }, 250);
                LazyLodProducts();
            }
        });
}, 500);
</script>
<?php echo $footer; ?>
