<? if ($products && 0 < count ($products) && $products [0]["product_type"] == 5): ?>
<style>
    @media (max-width: 768px) {
        .product-thumb .image {
            transform: scale(1) !important;
        }
    }
</style>
<? endif; ?>
<style>
    p {
        color: #444 !important;
    }

    @media (max-width: 768px) {
        .HeaderButtons .AccountDD {
            top: 6px !important;
        }
    }

    .AccountDD {
        margin: 14px 24px 0px !important;
    }

    .cat-but {
        margin-top: 8px !important;
    }
</style>
<?php
$product_ids=array();
$dataLayerIndex=1;
echo $header; ?>
<script>
    let viewedElements = [];
    let viewedElementsCount = 0;
    let itemDatalayerIndex = [];
    let dataLayerSituationEventIndex = 0;
    let breadCrumbAllText = 'Anasayfa';
    let timer;

    function isScrolledIntoView(element, product = true) {
        var windowHeight = window.innerHeight;
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + windowHeight;
        var elementTop = $(element).offset().top;
        var elementBottom = elementTop + $(element).height();//$(elem).height(); //top only
        //console.log($(element).data('datalayerid')+' - wTop:'+docViewTop+' wBottom:'+docViewBottom+' eTop:'+elementTop+' eBottom:'+elementBottom);
        if (product) {
            return (elementBottom > 0 && elementTop > 0 && (elementTop < docViewBottom) && (elementTop > docViewTop));
        } else {
            return (elementBottom > 0 && elementTop > 0 && (elementBottom < docViewBottom) && (elementTop > docViewTop));
        }

    }

    function getDataLayerItemData(element) {
        let itemData = {};
//promotion
        if ($(element).data('datalayerpromotionid')) {
            itemData.promotion_id = $(element).data('datalayerpromotionid');
        }
        if ($(element).data('datalayerpromotionname')) {
            itemData.promotion_name = $(element).data('datalayerpromotionname');
        }
        if ($(element).data('datalayercreativename')) {
            itemData.creative_name = $(element).data('datalayercreativename');
        }
//product
        if ($(element).data('datalayeritemid')) {
            itemData.item_id = $(element).data('datalayeritemid');
        }
        if ($(element).data('datalayeritemname')) {
            itemData.item_name = $(element).data('datalayeritemname');
        }
        if ($(element).data('datalayerprice')) {
            itemData.price = $(element).data('datalayerprice');
        }
        if ($(element).data('datalayeritembrand')) {
            itemData.item_brand = $(element).data('datalayeritembrand');
        }
        if ($(element).data('datalayeritemcategory')) {
            itemData.item_category = breadCrumbAllText; //$(element).data('datalayeritemcategory');
        }
        if ($(element).data('datalayeritemvariant')) {
            itemData.item_variant = $(element).data('datalayeritemvariant');
        }
        if ($(element).data('datalayeritemlistname')) {
            itemData.item_list_name = $(element).data('datalayeritemlistname');
        }
//common
        if ($(element).data('datalayerlocationid')) {
            itemData.location_id = $(element).data('datalayerlocationid');
        }
        if ($(element).data('datalayerindex')) {
            itemData.index = $(element).data('datalayerindex');
        }
        return itemData;
    }

    function dataLayerItemPush(eventName, items) {
        let params = {
            "event": eventName,
            "ecommerce": {
                "items": items
            }
        };
        window.dataLayer.push(params);
//console.log('*dl['+eventName+'] -> index:'+items[0].index);
    }

    function dataLayerCheckVisibleElements() {
        $('.dataLayerElement').each(function (index, element) {
            let id = $(element).data('datalayerid');
            let viewEvent = $(element).data('datalayerviewevent');
            let data = getDataLayerItemData(element);
            if (isScrolledIntoView(element) && !viewedElements[id]) {
                //console.log('--> ' + id);
                //elementDataObjects.push(data);
                dataLayerItemPush(viewEvent, [data]);
                itemDatalayerIndex[id] = window.dataLayer.length;
                viewedElements[id] = true;
                viewedElementsCount++;
            }
        });
    }

    $(window).scroll(function () {
        dataLayerCheckVisibleElements();
    });

    function firstItemCheck() {
        dataLayerCheckVisibleElements();
        if (viewedElementsCount == 0) {
            timer = setTimeout(firstItemCheck, 1000);
        } else {
            clearTimeout(timer);
        }
    }

    $(document).ready(function () {
        $(".dataLayerElement").click(function () {
            let id = $(this).data('datalayerid');
            let selectEvent = $(this).data('datalayerselectevent');
            let data = getDataLayerItemData(this);
            dataLayerItemPush(selectEvent, [data]);
            //alert(id);//debug
        });
        firstItemCheck();
    });
</script>
<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">
    <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>
<script>
    window.dataLayer.push({
        "event": "situation",
        "pageType": "Product Listing",
        "siteServer": "s1",
        "userSituation": "<?=$dataLayer['userType']?>",
        "userId": "<?=$dataLayer['customer_id']?>",
        "userHashedEmail": "<?=$dataLayer['emailHash']?>",
        "breadcrumb": "Anasayfa"
    });
    dataLayerSituationEventIndex = window.dataLayer.length;
</script>

<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="<?php echo $class; ?> category-page"><?php echo $content_top; ?>
              <h1 class="text-center">Sayfa Tasarlayıcı</h1>
        <div class="CategorySelectbox__AREA text-center">
          <select class="CategorySelectbox" id="category_select_box_3">
          <option value="">Koleksiyon</option>
          </select>
          <div class="CategorySelectbox__Appearance">
          <i class="CategorySelectbox__AppearanceIcon fa fa-chevron-down"></i>
          </div>
        </div>  
            <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(count($products) == 0 && !$home) { ?>
                <p class="h4 text-center">Ürün bulunamadı</p>
            <?php }  if ($home) { ?>
                <p class="h4 text-center">
                    Başlamak için bir Deercase koleksiyonu seç 
                    <i class="fa fa-hand-o-up" aria-hidden="true"></i>
                </p>
                <br/>

                <form id="designer-options" action="<?= $action ?>" method="POST" enctype="multipart/form-data">
                    <p class="h4 text-center">Manşet Ayarları</p>
                    
                    <div class="row">
                        <div class="col-sm-6">
                            <label>Medya</label>
                            <div class="form-control" style="height:unset">
                                <div 
                                    id="show-media" 
                                    class="text-center <?php if($affiliate_content['media']=="")  { ?> d-none <?php } ?>">
                                    &nbsp;<a href="image/affiliate/media/<?= $affiliate_content['media']?>"><?=$affiliate_content['media']?></a>
                                    <button id="media-remove-btn" class="btn">Kaldır</button>
                                </div>
                                <input id="remove-media" name="remove_media" type="hidden" value="0">
                                <div 
                                    id="upload-media" 
                                    class=" <?php if($affiliate_content['media']!="")  { ?> d-none <?php } ?>">
                                    <input 
                                        type="file" 
                                        id="input-media" 
                                        name="media" 
                                        class="w-100"
                                        accept="video/mp4, image/png, image/jpeg">
                                </div>
                            </div>
                            <p class="text-center">Video için mp4 formatında / Görsel için jpeg,jpg,png formatlarında Max 5MB yükleme yapınız.</p>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="input-title">Başlık</label>
                                <input type="text" name="title" value="<?= $affiliate_content['title'] ?>" placeholder="Başlık" id="input-title" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="input-text">Metin</label>
                                <textarea name="text" placeholder="Metin" id="input-text" class="form-control"><?= $affiliate_content['text'] ?></textarea>
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary pull-right">
                        Kaydet
                    </button>
                    <div style="clear:both"></div>
                </form>
                <?php } ?>
            <div class="row">
                <?php
                if (!$home) { //Anasayfada değilse ürünleri listele
                ?>
                <?php foreach ($products as $index => $product) {
                $product_ids[] = $product['product_id'];
                ?>
                <div class="product-layout product-list col-lg-4 col-md-4 col-sm-4 col-xs-6 d-none">


                    <div class="product-thumb">

                        <? if ($product ['product_type']): ?>
                        <? foreach ($product ['collection_color'] as $c_index => $color): ?>


                        <div class="dataLayerElement PS-<?= $product ['product_id']; ?> PS-<?= $product ['product_id'] . $color ['attribute_id']; ?> <?= ($color ['show'])? '':'d-none'; ?> image">

                            <?php $img_count = 0 + count($color['images']) + ((isset($color['image'])) ? 1 : 0); 
                                $img_class = ($img_count == 1 || $img_count == 0) ? 'non-owl-padding' : '';
                            ?>

                            <a href="<?php echo $color['href']; ?>"
                               id="ProductImageCarousel__<?= $index; ?>--<?= $product ['product_id'] . $color ['attribute_id']; ?>"
                               class="custom-0004 owl-carousel <?= $img_class ?>">
                                <div>

                                    <? if ($product ['product_type'] == '2'): ?>
                                    <img class="GIFonPRODUCT" src="/catalog/view/theme/deercase/image/GIF_HarfYaz1.gif"
                                         alt=""/>
                                    <? elseif ($product ['product_type'] == '4' or $product ['product_type'] == '6'): ?>
                                    <img class="GIFonPRODUCT" src="/catalog/view/theme/deercase/image/GIF_IsminiYaz.gif"
                                         alt=""/>
                                    <? elseif ($product ['product_type'] == '8'): ?>
                                    <img class="GIFonPRODUCT"
                                         src="/catalog/view/theme/deercase/image/powerbank-ismini-yaz.gif" alt=""/>
                                    <? endif; ?>

                                    <img <?=(($color['show']) ? 'data-original':'data-onclicksrc') .'="'.$color['image'].'"'?>
                                    alt="<?php echo $color ['name']; ?>"
                                    title="<?php echo $color ['name']; ?>" class="img-responsive
                                    owl-lazy <?=(!$color['show']) ? 'product-img-onclick':'productFirstImage'?>"
                                    data-src="/catalog/view/theme/deercase/image/placeholder250.png" />

                                </div>
                                <?php foreach ($color ['images'] as $image): ?>
                                <div>
                                    <img data-src="<?php echo $image ['popup']; ?>" alt="<?php echo $color ['name']; ?>"
                                         title="<?php echo $color ['name']; ?>" class="img-responsive owl-lazy"/>
                                </div>
                                <? endforeach; ?>
                            </a>

                            <script>
                                jQuery(function ($) {
                                    $('#ProductImageCarousel__<?= $index; ?>--<?= $product ['product_id'] . $color ['attribute_id']; ?>'
                                ).
                                    owlCarousel({
                                        items: 1,
                                        lazyLoad: true,
                                        dots: true,
                                    });
                                });
                            </script>

                        </div>

                        <? endforeach; ?>
                        <? else: ?>
                        <div class="image">
                            <a href="<?php echo $product['href']; ?>" id="ProductImageCarousel__<?= $index; ?>"
                               class="custom-0004 owl-carousel">
                                <img data-original="<?php echo $product ['no_cache_image']; ?>"
                                     src="/catalog/view/theme/deercase/image/placeholder250.png"
                                     alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>"
                                     class="img-responsive lazy"/>
                                <? foreach ($product ['images'] as $image): ?>
                                <img data-original="<?php echo $image ['popup']; ?>"
                                     src="/catalog/view/theme/deercase/image/placeholder250.png"
                                     alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>"
                                     class="img-responsive lazy"/>
                                <? endforeach; ?>
                            </a>
                            <script>
                                jQuery(function ($) {
                                    $('#ProductImageCarousel__<?= $index; ?>').owlCarousel({
                                        items: 1,
                                        dots: true
                                    });
                                });
                            </script>
                        </div>
                        <? endif; ?>

                        

                        <div class="custom-0007 d-none">
                            <? if ($product ['product_type']): ?>
                            <? if ($sub_category_id2 >= 1806 and $sub_category_id2 <= 1926 or $sub_category_id2 >= 2038
                            and $sub_category_id2 <= 2155 ) { ?>
                            <style type="text/css">.pb-50{padding-bottom: 50px!important;}</style>
                            <?php } else {
                        if($show_color_attribute){ ?>
                            <div class="FlexScroller <?= (($category_id >= 6502 && $category_id <= 6507) || ($category_id >= 2689 && $category_id <= 2692) || ($category_id >= 4762 && $category_id <= 4764) || ($category_id >= 7314 && $category_id <= 7315) || ($category_id >= 3023 && $category_id <= 3025) ?'d-none':'') ?>  <?= (4 < count($product ['collection_color']))? '': 'justify-content-center'; ?> ">
                                <? foreach ($product ['collection_color'] as $color): ?>
                                <? if ($color ['show']): ?>
                                <div class="PP__CaseCircle_Cat">
                                    <a href="javascript: PS (<?= $product ['product_id'] . $color ['attribute_id']; ?>, <?= (isset($product['product_id'])) ? $product['product_id']:0  ?>, <?=(isset($color['product_id']))? $color['product_id']:0 ?>, '<?=$color['attribute_name']?>');">
                                        <img src="<?= $color ['attribute_image']; ?>" alt=""/>
                                    </a>
                                </div>
                                <? endif; ?>
                                <? endforeach; ?>
                                <? foreach ($product ['collection_color'] as $color): ?>
                                <? if (! $color ['show']): ?>
                                <div class="PP__CaseCircle_Cat">
                                    <a href="javascript: PS (<?= $product ['product_id'] . $color ['attribute_id']; ?>, <?= (isset($product['product_id'])) ? $product['product_id']:0  ?>, <?=(isset($color['product_id']))? $color['product_id']:0 ?>, '<?=$color['attribute_name']?>');">
                                        <img src="<?= $color ['attribute_image']; ?>" alt=""/>
                                    </a>
                                </div>
                                <? endif; ?>
                                <? endforeach; ?>
                            </div>

                            <?php } } ?>

                            <? endif; ?>
                            <div class="caption">
                                <h4>
                                    <? if ($product ['product_type']): ?>
                                    <? foreach ($product ['collection_color'] as $c_index => $color): ?>
                                    <a class="PS-<?= $product ['product_id']; ?> PS-<?= $product ['product_id'] . $color ['attribute_id']; ?> <?= ($color ['show'])? '': 'd-none'; ?>"
                                       href="<?php echo $color ['href']; ?>"><?php echo $color ['name']; ?></a>

                                    <? endforeach; ?>
                                    <? else: ?>
                                    <a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a>
                                    <? endif; ?>
                                </h4>
                                <?php if ($product['price']) { ?>
                                <? if ($product ['product_type']): ?>
                                <? foreach ($product ['collection_color'] as $c_index => $color): ?>
                                <p class="PS-<?= $product ['product_id']; ?> PS-<?= $product ['product_id'] . $color ['attribute_id']; ?> <?= ($color ['show'])? '': 'd-none'; ?> price">
                                    <?php if (!$color['special']) { ?>
                                    <?php echo $color['price']; ?>

                                        <?php if($product['quantity'] == 0){ ?>
                                            <span style="font-weight: 700; color:red;">TÜKENDİ!</span>
                                        <?php }else{ ?>
                                            <?php if(!$product['campaig_not_include']){ ?>
                                            <span style="color:red;"><b class="campaign_text"> 3 Al 2 Öde! Ücretsiz Kargo!</b></span>
                                            <?php } ?>
                                        <?php } ?>
                                    <?php } else { ?>
                                    <span class="price-new"><?php echo $color['special']; ?></span> <span
                                            class="price-old"><?php echo $color['price']; ?></span>
                                        <?php if(!$product['campaig_not_include']){ ?>
                                            <span style="color:red; line-height:0.3"><b class="campaign_text"> 3 Al 2 Öde! Ücretsiz Kargo!</b></span>
                                        <?php } ?>
                                        
                                    <?php } ?>
                                </p>
                                <? endforeach; ?>
                                <? else: ?>
                                <p class="price">
                                    <?php if (!$product['special']) { ?>
                                    <?php echo $product['price']; ?>
                                    <?php } else { ?>
                                    <span class="price-new"><?php echo $product['special']; ?></span> <span
                                            class="price-old"><?php echo $product['price']; ?></span>
                                    <?php } ?>
                                </p>
                                <? endif; ?>
                                <?php } ?>

                                <?php if($page_build=="model") { ?>
                                <button 
                                    data-toggle="tooltip" 
                                    data-model="<?php echo $product['model']; ?>" 
                                    data-model-status="<?php echo $product['model_status']; ?>" 
                                    class="btn button-affiliate <?php echo ($product['model_status']==1) ? 'btn-danger' : 'btn-success'; ?>">
                                    <?php echo ($product['model_status']==1) ? 'Sayfamdan Çıkar' : 'Sayfama Ekle'; ?>
                                </button>  
                                <?php } ?>

                                <?php if($page_build=="product") { ?>
                                <button 
                                    data-toggle="tooltip" 
                                    data-product-id="<?php echo $product['product_id']; ?>" 
                                    data-product-status="<?php echo $product['product_status']; ?>" 
                                    class="btn button-affiliate <?php echo ($product['product_status']==1) ? 'btn-danger' : 'btn-success'; ?>">
                                    <?php echo ($product['product_status']==1) ? 'Sayfamdan Çıkar' : 'Sayfama Ekle'; ?>
                                </button>
                                <?php } ?>
  
                            </div>
                        </div>
                    </div>
                </div>
                <?php }
                $product_ids=json_encode($product_ids);
                ?>
                <?php } ?>

                    
                <? if (!$show_color_attribute)  { ?>
                <? if ($category_id == 7856 || $category_id == 4762 || $category_id == 6502 || $category_id == 4770) { ?>
                    <style type="text/css">
                    .custom-0007 {
                                    bottom: 40px !important;
                                }
                    @media (max-width: 768px) {
                        .custom-0007 {
                            bottom: 10px !important;
                        }
                        .pb-105_m {
                                padding-bottom: 25px!important;
                            }
                        }
                    </style>
                <? } else { ?>
                    <style type="text/css">
                    .custom-0007 {
                                    bottom: 40px !important;
                                }
                    @media (max-width: 768px) {
                        .custom-0007 {
                            bottom: 10px !important;
                        }
                        .pb-105_m {
                                padding-bottom: 65px!important;
                            }
                        }
                    </style>
                <? } } ?>
                <script>
                    var PS = function (AttrPrd_ID, Product_ID, variantProductId, variantAttributeName) {
                        var targetIndex = $('.PS-' + Product_ID).find('.owl-carousel:visible').find('.owl-item.active').index();
                        console.log(targetIndex);
                        $('.PS-' + Product_ID).addClass('d-none');
                        $('.PS-' + AttrPrd_ID).removeClass('d-none');
                        $(document).scrollTop($(document).scrollTop() + 1);
                        $(document).scrollTop($(document).scrollTop() - 1);
                        var productImage = $('.PS-' + AttrPrd_ID).find('.product-img-onclick').data('onclicksrc');
                        console.log(productImage);
                        $('.PS-' + AttrPrd_ID).find('.product-img-onclick').attr('src', productImage);
                        $('.PS-' + AttrPrd_ID).find('.owl-carousel').trigger('to.owl', [targetIndex, 0]);
                    };
                </script>
            </div>
            <?php echo $content_bottom; ?></div>
        <?php echo $column_right; ?></div>
</div>

<style>
#designer-options {
    background: #f5f5f5;
    padding: 1rem;
    border-radius: 4px;
}
#media-img {
                object-fit: cover;
    margin: auto;
    display: flex;
}
#media-remove-btn {
    margin: 1rem auto;
    display: flex;
}
#affiliate .account-content {
  margin-bottom: 30px;
}

#affiliate .BlackBTN {
    font-family: "Open Sans", sans-serif;
    text-transform: uppercase;
    border: solid 1px #222;
    background-color: #222;
    padding-right: 15px;
    white-space: normal;
    padding-left: 15px;
    border-radius: 5px;
    line-height: 40px;
    padding-bottom: 0;
    font-weight: 400;
    font-size: 12px;
    margin: 5.7px 0;
    display: block;
    padding-top: 0;
    height: 40px;
    color: #FFF;
    zoom: 1;
}

#affiliate .BlackBTN > i {
  margin-right: 4px;
}
#affiliate .BlackBTN:hover {
    background-color: #FFF;
    color: #222;
}

#affiliate .sb-title {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 500;
  font-family: Roboto;
  color: #222
}

.sb-group #content ul.list-unstyled {
  margin-bottom: 3rem;
}

  .bread-desk {
        margin-top:60px
  }
  @media (max-width: 768px) {
    .bread-desk {
        margin-top:5px
    }
  }

  .affiliate-button {
    width:100%!important;
    margin-top: 1rem;
  }
</style>

<style>
    .custom-0007 {
        position: unset!important;
        padding: 0!important;
        text-align: center;
    }
    .product-grid .product-thumb .caption {
        min-height: unset!important;
    }
    .product-thumb .image {
        margin: 20px 0!important;
    }
    
    .custom-0004 .owl-dots {
        position: unset!important;
        margin-top: -10px;
    }

    @media (max-width: 768px) {
        .product-thumb .image {
            transform: scale(1.20);
        }
    }
    .product-thumb .caption {
        padding: 0!important;
    }
    .product-thumb .caption a {
        padding: 0 10%;
    }
    .non-owl-padding {
        padding-bottom: 17px!important;
    }
</style>

<script>
    $('#media-remove-btn').click(function(e) {
        e.preventDefault();
        $('#show-media').addClass('d-none');
        $('#upload-media').removeClass('d-none');
        $('#remove-media').val(1);
    });
    jQuery(function ($) {
        $('.product-layout').removeClass('d-none');
        $('.GIFonPRODUCT').click(function () {
            window.location.href = ('/' + $(this).next('.product-thumb').find('div:not(.d-none)').children('a').attr('href'));
        });
    });

    jQuery(function ($) {
        if ($(window).width() <= 768) {
            $('.hidden-in-category').hide();
            $('.custom-0001').removeClass('custom-0001').addClass('custom-0001--DEACTIVE');
            $('#cart').addClass('--in-category');
            var lastScrollTop = 0, delta = 5;
            $(window).scroll(function () {
                var nowScrollTop = $(this).scrollTop();
                if (Math.abs(lastScrollTop - nowScrollTop) >= delta) {
                    if (nowScrollTop > lastScrollTop) {
                        $('.hidden-in-category').hide();
                        $('.custom-0001').removeClass('custom-0001').addClass('custom-0001--DEACTIVE');
                        $('#cart').addClass('--in-category');
                    } else {
                        $('.hidden-in-category').show();
                        $('.custom-0001--DEACTIVE').removeClass('custom-0001--DEACTIVE').addClass('custom-0001');
                        $('#cart').removeClass('--in-category');
                    }
                    lastScrollTop = nowScrollTop;
                }
            });
        }

        $(window).scroll(function () {
            checkProductScroll();
        });

        function checkProductScroll() {
            $(".productFirstImage").each(function () {

                if (isScrolledIntoView(this, true)) {
                    var imgUrl = $(this).data('original');
                    $(this).attr('src', imgUrl);
                }

            });
        }

        setInterval(function () {
            checkProductScroll();
        }, 2000);
        //checkProductScroll();

    });


</script>

<?php echo $footer; ?>

<script>


$('#category_select_box_3').on('change', function () {
      var category_id = $(this).children("option:selected").attr('data-id');
      if(category_id!==undefined) {
        location.href = 'index.php?route=affiliate/designer&tracking='+'<?= $tracking_code ?>'+'&category_id='+category_id;
      } else {
        location.href = 'index.php?route=affiliate/designer&tracking='+'<?= $tracking_code ?>';
      }
  });

      jQuery (function ($) {
        if ($(window).width() <= 768)
        {
            $('.hidden-in-category').hide();
            $('.custom-0001').removeClass ('custom-0001').addClass ('custom-0001--DEACTIVE');
            $('#cart').addClass ('--in-category');
            var lastScrollTop = 0, delta = 5;
            $(window).scroll(function(){
                var nowScrollTop = $(this).scrollTop();
                if(Math.abs(lastScrollTop - nowScrollTop) >= delta){
                    if (nowScrollTop > lastScrollTop){
                        $('.hidden-in-category').hide ();
                        $('.custom-0001').removeClass ('custom-0001').addClass ('custom-0001--DEACTIVE');
                        $('#cart').addClass ('--in-category');
                    } else {
                        $('.hidden-in-category').show ();
                        $('.custom-0001--DEACTIVE').removeClass ('custom-0001--DEACTIVE').addClass ('custom-0001');
                        $('#cart').removeClass ('--in-category');
                    }
                    lastScrollTop = nowScrollTop;
                }
            });
        }
    });

  $("#affiliate-products-table").on('click', '.affiliate-product-delete', function() {
    var productID = $(this).attr('data-product-id')
    deleteAffiliateProduct(productID);
  });  

  $(function () {
    $.ajax({
        url: 'index.php?route=affiliate/designer/switchCategory',
        dataType: 'json',
        type: 'POST',
        data: {category_id : '7326'},
        success: function (json) {
            var disabledCategories = ['7461','7434']; <? # Lansman kılıfları ve isimli telefon kılıfları disabled ?>
                    json['categories'].forEach(function (item, index) {
                        item.name = item.name.replace('iPhone 13 Pro Max','');
                        if(!disabledCategories.includes(item.category_id)) {
                            if (item.category_id == '<?php echo $category_id ?>') {
                                $('#category_select_box_3').append('<option value="' + item.href + '" selected="selected" data-id="' + item.category_id + '">' + item.name + '</option>');
                            } else {
                                $('#category_select_box_3').append('<option value="' + item.href + '" data-id="' + item.category_id + '">' + item.name + '</option>');
                            }
                        }
                    })
        }
      });
  });

$( ".button-affiliate" ).click(function() {
    <?php if($page_build=="model") { ?>
    if($(this).attr('data-model-status')==0) {
        editAffiliateItem('addAffiliateItem',$(this).attr('data-model'))
    } else if($(this).attr('data-model-status')==1) {
        editAffiliateItem('deleteAffiliateItem',$(this).attr('data-model'))
    }
    <?php } else if($page_build=="product") { ?>
        if($(this).attr('data-product-status')==0) {
        editAffiliateItem('addAffiliateItem',$(this).attr('data-product-id'))
        } else if($(this).attr('data-product-status')==1) {
            editAffiliateItem('deleteAffiliateItem',$(this).attr('data-product-id'))
        }
    <?php } ?> 
});

function editAffiliateItem(action, attr) {
    $.ajax({
        url: "index.php?route=affiliate/designer/"+action,
        <?php if($page_build=="model") { ?>
            data: { model : attr },
        <?php } else if($page_build=="product") { ?>
            data: { product_id : attr },
        <?php } ?>
        type: 'POST',
        success: function(res) {
            if(action=='addAffiliateItem'){
               if(res.status==1) {
                   <?php if($page_build=="model") { ?>
                    $('.button-affiliate[data-model='+attr+']').text('Sayfamdan Çıkar');
                    $('.button-affiliate[data-model='+attr+']').attr('data-model-status', 1);
                    $('.button-affiliate[data-model='+attr+']').removeClass('btn-success', 1);
                    $('.button-affiliate[data-model='+attr+']').addClass('btn-danger', 1);
                    <?php } else if($page_build=="product") { ?>
                    $('.button-affiliate[data-product-id='+attr+']').text('Sayfamdan Çıkar');
                    $('.button-affiliate[data-product-id='+attr+']').attr('data-product-status', 1);
                    $('.button-affiliate[data-product-id='+attr+']').removeClass('btn-success', 1);
                    $('.button-affiliate[data-product-id='+attr+']').addClass('btn-danger', 1);  
                    <?php } ?>           
               }
            } else if(action=='deleteAffiliateItem') {
                if(res.status==1) {
                    <?php if($page_build=="model") { ?>
                    $('.button-affiliate[data-model='+attr+']').text('Sayfama Ekle');
                    $('.button-affiliate[data-model='+attr+']').attr('data-model-status', 0);
                    $('.button-affiliate[data-model='+attr+']').removeClass('btn-danger', 1);
                    $('.button-affiliate[data-model='+attr+']').addClass('btn-success', 1);
                    <?php } else if($page_build="product") { ?>
                    $('.button-affiliate[data-product-id='+attr+']').text('Sayfama Ekle');
                    $('.button-affiliate[data-product-id='+attr+']').attr('data-product-status', 0);
                    $('.button-affiliate[data-product-id='+attr+']').removeClass('btn-danger', 1);
                    $('.button-affiliate[data-product-id='+attr+']').addClass('btn-success', 1);                        
                    <?php } ?>
               }
            }
        }
    });
}

</script>
