<?php echo $header; ?>
<style>
.bread-desk {
    margin-top:60px
}
@media (max-width: 768px) {
.bread-desk {
    margin-top:5px
}
}
</style>
<div class="container-fluid p-0 bread_backg bread-desk">
    <? 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>
            <!--<h3><?php echo $text_refine; ?></h3> Alt Kategoriler -->
            <? if ($all_categories): ?>
                <select class="CategorySelectbox" onchange="window.location.href = $(this).val();">
                    <option value="" selected="selected">Marka</option>
                    <? foreach ($all_categories as $category): ?>
                        <? if ($category ['category_id'] == $category_id): ?>
                            <option value="<?= $category ['href']; ?>" selected="selected"><?= str_replace('Telefon Kılıfı', '', $category ['name']); ?></option>
                        <? else: ?>
                            <option value="<?= $category ['href']; ?>"><?= str_replace('Telefon Kılıfı', '', $category ['name']); ?></option>
                        <? endif; ?>
                    <? endforeach; ?>
                </select>
                <div class="CategorySelectbox__Appearance">
                    <i class="CategorySelectbox__AppearanceIcon fa fa-chevron-down"></i>
                </div>
            <? endif; ?>
<? if ($sub_categories): ?>
                <select class="CategorySelectbox" onchange="window.location.href = $(this).val();">
                    <option value="" selected="selected">Model</option>
                    <? foreach ($sub_categories as $category): ?>
                        <? if ($category ['category_id'] == $sub_category_id): ?>
                            <option value="<?= $category ['href']; ?>" selected="selected"><?= str_replace('Telefon Kılıfı', '', $category ['name']); ?></option>
                        <? else: ?>
                            <option value="<?= $category ['href']; ?>"><?= str_replace('Telefon Kılıfı', '', $category ['name']); ?></option>
                        <? endif; ?>
                    <? endforeach; ?>
                </select>
                <div class="CategorySelectbox__Appearance">
                    <i class="CategorySelectbox__AppearanceIcon fa fa-chevron-down"></i>
                </div>
            <? endif; ?>
<? if ($sub_categories2): ?>
                <select class="CategorySelectbox" onchange="window.location.href = $(this).val();">
                    <option value="" selected="selected">Koleksiyon</option>
                    <? foreach ($sub_categories2 as $category): ?>
                        <? if ($category ['category_id'] == $sub_category_id2): ?>
                            <option value="<?= $category ['href']; ?>" selected="selected"><?= str_replace('Telefon Kılıfı', '', $category ['name']); ?></option>
                        <? else: ?>
                            <option value="<?= $category ['href']; ?>"><?= str_replace('Telefon Kılıfı', '', $category ['name']); ?></option>
                        <? endif; ?>
                    <? endforeach; ?>
                </select>
                <div class="CategorySelectbox__Appearance">
                    <i class="CategorySelectbox__AppearanceIcon fa fa-chevron-down"></i>
                </div>
            <? endif; ?>
<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>
            <?php if ($show_products) { ?>
            <?php } else { ?>
                <?php if ($category_list) { ?>
                    <?php foreach ($category_list as $c_key => $category_lists) { ?>
                        <!-- . -->
                        <div class="row">
                            <div class="col-xs-12 text-center"><hr>
                                <h2 class="h1_category"><?php echo $category_lists['name']; ?></h2><hr>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <img data-original="<?php echo $category_lists['banner']; ?>" class="w-100 lazy" />
                            </div>
                            <div class="col-sm-6 pt-20">
                                <div id="CProducts__<?= $c_key; ?>" class="owl-carousel custom-0004 custom-0004--Full pl-20">
                                    <?php foreach ($category_lists['products'] as $product_c) { ?>
                                        <div class="product">
                                            <div class="product-thumb">
                                                <div class="image">
                                                    <a href="<?php echo $product_c['href']; ?>">
                                                        <img data-original="<?php echo $product_c['thumb']; ?>" alt="<?php echo $product_c['name']; ?>" title="<?php echo $product_c['name']; ?>" class="img-responsive lazy" />
                                                    </a>
                                                </div>
                                                <div>
                                                    <div class="caption">
                                                        <h4><a href="<?php echo $product_c['href']; ?>"><?php echo $product_c['name']; ?></a></h4>
                                                        <p class="price">
                                                            <span class="price-new"><?php echo $product_c['special']; ?></span> <span class="price-old"><?php echo $product_c['price']; ?></span>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    <?php } ?>
                                </div>
                            </div>
                        </div>
<script>
                            jQuery(function ($) {
                                $('#CProducts__<?= $c_key; ?>').owlCarousel({
                                    items: 2,
                                    itemsMobile: [480, 2],
                                    dots: true
                                });
                            });
                        </script>
<?php } ?>
                    <!-- . -->
<?php } ?>
            <?php } ?>
            <div class="row" id="show_data"></div>
<?php echo $content_bottom; ?></div>
        <?php echo $column_right; ?></div>
</div>
<script>
    jQuery(function ($) {
        $('.product-layout').removeClass('d-none');
    });
</script>
<script>
setTimeout(function(){
<?php
if ($show_products) {
    ?>
            $.ajax({
                url: '<?php echo HTTPS_SERVER ?>index.php?route=product/category/showproducts',
                dataType: 'json',
                type: 'post',
                data: {category_id: '<?= $category_id ?>'},
                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-4 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 () {
                        $('.custom-0007.d-none').removeClass('d-none');
                        window.dispatchEvent(new Event('resize'));
                   // }, 250);
                }
            });
    <?php
}
?>
}, 2000);
</script>
<?php echo $footer; ?>
