<?php echo $header;?>

<div class="adblocker-overlay" id="adb-warning" style="display:none">
    <div class="adblocker-text">
    Devam etmek için lütfen <span style="font-weight: 500;">Reklam Engelleyici</span> eklentinizi kapatın. 
    </div>    
</div>

<script> 
var isFirefox = navigator.userAgent.indexOf("Firefox") != -1;
function areAdsBlocked(callback) {
      var URL = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
      fetch(URL, {
        method: 'HEAD', 
        mode: 'no-cors'
      })
      .then(response => callback(false)) //Response was received --> ads are NOT blocked
      .catch(error => callback(true));   //No response           --> ads are blocked
    }
    function checkAdBlocker() {
      areAdsBlocked(function(isBlocked){
        if(isBlocked){
            console.log('blocked');
            $('#adb-warning').css('display','flex');
        }
      })
}
if(navigator.userAgent.indexOf("Firefox") != -1) {
    checkAdBlocker();    
}
</script>

<? if (substr ($model, 0, 3) == "scr"): ?>
<style>
    #options {
        margin-top: -55px !important;
    }
    .PP__OptionTitle, .CategorySelectbox, .CategorySelectbox__AppearanceIcon, #attribute_cases,
    #attribute_color_cases {
        display: none !important;
    }
    .PP__CustomizationText .PP__CustomizationTextPositions .PP__CustomizationTextPosition.PP__CustomizationTextPosition--VerticalRight.Right::before{margin-left:3px!important;}
</style>
<? endif; ?>

<?php
    $breadCrumbAllText='';
    foreach ($breadcrumbs as $breadcrumb) { $breadCrumbAllText .= $breadcrumb['text'].' / '; }
    $breadCrumbAllText = rtrim($breadCrumbAllText, ' / ');
?>
<style>
    .PP__CustomizationText .PP__CustomizationTextPositions .PP__CustomizationTextPosition.PP__CustomizationTextPosition--VerticalRight::before {
        margin-left: -1px;
        margin-top: -8px;
        height: 17px;
        width: 3px;
    }
    .PP__CustomizationText .PP__CustomizationTextPositions .PP__CustomizationTextPosition.PP__CustomizationTextPosition--VerticalRight::before{
        background-color: #000;
        position: absolute;
        margin-left: 5px;
        content: '';
        height: 17px;
        width: 3px;}
</style>
<script>
    let isLoading=true;
    window.onload = function () {isLoading=false;}
    let datalayerItemIndex = 0;
    function dataLayerItemPush(eventName, items) {
        let params = {
            'event': eventName,
            'ecommerce': {
                'items': items
            }
        };
        window.dataLayer.push(params);
        //console.log('>>>['+eventName+']>>> id:('+id+') name:('+name+') itemBrand:('+item_brand+') itemCat:('+item_category+') itemListName:('+item_list_name+') index:'+index);
        //if (params.event=='select_item') {alert(name)}
    }
    window.dataLayer.push({
        "event": "situation",
        "pageType": "product",
        "siteServer": "s1",
        "userSituation": "<?=$dataLayer['userType']?>",
        "userId": "<?=$dataLayer['customer_id']?>",
        "userHashedEmail": "<?=$dataLayer['emailHash']?>",
        "breadcrumb": "<?=$breadCrumbAllText?>"
    });
    /*dataLayerItemPush('view_item', [{
        'item_name': '<?=$heading_title?>',
        'item_id': '<?=$product_id?>',
        'price': '<?=strtr($price, [","=>".", "₺"=>""])?>',
        'item_brand': '<?=$breadcrumbs[1]["text"]?>',
        'item_category': "<?=$breadCrumbAllText?>",
        'item_variant': '<?=$attribute_groups[1]["attribute"][0]["name"]?>',
        'item_list_name': '<?=$breadcrumbs[3]["text"]?>',
        'index': 1
    }]);
    datalayerItemIndex = window.dataLayer.length;*/
</script>
<?php
if($product_type==7 || $product_type==9):
?>
<style>
    .uploader {
        display: block;
        margin: 0 auto;
    }
    .uploader__input {
        display: none;
    }
    .uploader__label {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        padding: 2em 1.5em;
        text-align: center;
        background: #fff;
        border-radius: 7px;
        border: 3px solid #eee;
        transition: all .2s ease;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
        background-position: 0 0, 15px 15px;
        background-size: 30px 30px;
    }
    .uploader__label:hover {
        border-color: #454cad;
    }
    .uploader__label.hover {
        border: 3px solid #454cad;
        box-shadow: inset 0 0 0 6px #eee;
        background-color: #616161;
        background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0);
    }
    .uploader__label.hover .uploader__clipalt {
        stroke: #fff;
    }
    .uploader__wrapper {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .uploader__file {
        position: absolute;
        left: 0.5em;
        top: 0em;
        display: block;
        width: 3em;
        height: 3em;
        border-radius: 50%;
        z-index: 1;
        opacity: 0;
        -webkit-transform: translate3d(0, -1em, 0) scale(0);
        transform: translate3d(0, -1em, 0) scale(0);
        transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1);
    }
    .uploader__file.show {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0) scale(1);
        transform: translate3d(0, 0, 0) scale(1);
    }
    .uploader__clipalt {
        fill: none;
        stroke: #ccc;
        stroke-width: 5px;
        stroke-miterlimit: 10;
    }
    .uploader__clip {
        stroke-dasharray: 391.592px;
        stroke-dashoffset: -391.592px;
        fill: none;
        stroke: #333;
        stroke-width: 5px;
        stroke-miterlimit: 10;
    }
    .uploading .uploader__clip {
        transition: all .5s linear;
    }

</style>
<?php
endif;
?>
<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>
<div id="img_loader" class="lodaer_class">
    <? if ($product_type == 9): ?>
    <img src="/catalog/view/theme/deercase/image/customcase-loading.svg" class="loadinggif" >
    <? else: ?>
    <img src="<?php echo HTTPS_SERVER."image/loader.gif"?>" class="loadinggif" >
    <? endif; ?>
</div>

<div class="PP container">
    <div class="container mt-10"><?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; ?>">
            <div class="row">
                <?php if ($column_left || $column_right) { ?>
                <?php $class = 'col-sm-6'; ?>
                <?php } else { ?>
                <?php $class = 'col-sm-5'; ?>
                <?php } ?>

                <div id="loading" class="<?php echo $class; ?> text-center">
                    <img src="/catalog/view/theme/deercase/image/placeholder250.png" class="w-100" />
                </div>

                <!-- Image Canvas -->

                <div class="bLoading ajaxview d-none <?php echo $class; ?>">
                    <?
        if ($product_type == 1)
          preg_match ('/(SEFFAF_SAYDAM-SILVER|SEFFAF_SAYDAM-BLACK)/', $thumb, $__fImage);
        else
          $__fImage = false;
      ?>

                    <? if ($__fImage && $__fImage [0]): ?>
                    <div class="fImage__Colors">
                        <button class="fImage__Color fImage__Color--BLACK" onclick="$('.thumbnails > .owl-carousel').addClass ('d-none'); $('.fImage__BLACK--Carousel').removeClass ('d-none'); $('.fImage__SILVER').hide (); $('.fImage__BLACK').show (); $('#CustomizationText').appendTo ('.fImage__BLACK--Carousel .ThumbBox--Customization'); $('#product_image').val ($('#product_image--BLACK').val ());"></button>
                        <button class="fImage__Color fImage__Color--SILVER" onclick="$('.thumbnails > .owl-carousel').addClass ('d-none'); $('.fImage__SILVER--Carousel').removeClass ('d-none'); $('.fImage__BLACK').hide (); $('.fImage__SILVER').show (); $('#CustomizationText').appendTo ('.fImage__SILVER--Carousel .ThumbBox--Customization'); $('#product_image').val ($('#product_image--SILVER').val ());"></button>
                    </div>
                    <? endif; ?>



                    <ul class="thumbnails">

                        <? if ($__fImage && $__fImage [0]): ?>
                        <li class="fImage__BLACK--Carousel owl-carousel custom-0008">
                            <div class="ThumbBox--Customization" id="img_canvas">
                                <div id="canvas_media"></div>
                                <? if ($product_type == 4): ?>
                                <img class="Second_Layer" src="" title="" alt="" />
                                <? endif; ?>
                                <div id="CustomizationText" class="TextFont--Glitter <?= ($product_type != 4 ? ($product_type!=8?'TextPosition--Bottom':'TextPosition--Center'): 'TextPosition--Horizontal'); ?>"></div>
                                <? if ($product_type == 6): ?>
                                <div id="CustomizationText--Second" class="TextFont--Glitter TextPosition--Bottom"></div>
                                <? endif; ?>
                                <input type="hidden" name="product_image--BLACK" id="product_image--BLACK" value="" />
                            </div>
                        </li>
                        <li class="fImage__SILVER--Carousel d-none owl-carousel custom-0008">
                            <div class="ThumbBox--Customization" id="img_canvas">
                                <div id="canvas_media"></div>
                                <? if ($product_type == 4): ?>
                                <img class="Second_Layer" src="" title="" alt="" />
                                <? endif; ?>
                                <input type="hidden" name="product_image--SILVER" id="product_image--SILVER" value="" />
                            </div>
                        </li>
                        <? else: ?>
                        <li class="owl-carousel custom-0008">
                            <div class="ThumbBox--Customization" id="img_canvas">
                                <div id="canvas_media">
                                    <? if ($product_type == 0): ?>
                                    <img id="pimage" src="<?= $popup; ?>" width="500">
                                    <? endif; ?>
                                </div>
                                <? if ($product_type == 4): ?>
                                <img class="Second_Layer" src="" title="" alt="" />
                                <? endif; ?>
                                <div id="CustomizationText" class="TextFont--Glitter <?= ($product_type != 4 ? ($product_type!=8?'TextPosition--Bottom':'TextPosition--Center'): 'TextPosition--Horizontal'); ?>"></div>
                                <? if ($product_type == 6): ?>
                                <div id="CustomizationText--Second" class="TextFont--Glitter TextPosition--Bottom"></div>
                                <? endif; ?>
                            </div>
                            <? if (substr ($model, 0, 3) == "bnd"): ?>
                            <div class="ThumbBox mr-20">
                                <img src="<?= $thumb; ?>" data-src="<?= $popup; ?>" />
                            </div>
                            <?php foreach ($images as $image): ?>
                            <div class="ThumbBox mr-20">
                                <img class="PP__Image w-100" src="<?= $image['popup']; ?>" />
                            </div>
                            <?php endforeach; ?>
                            <? endif; ?>
                        </li>
                        <? if (substr ($model, 0, 3) == "bnd"): ?>
                        <script>
                            jQuery (function ($) {
                                let bndInterval = setInterval (function () {
                                    if ($('.thumbnails .owl-carousel.owl-loaded').length)
                                    {
                                        $('.thumbnails .owl-carousel').owlCarousel ('remove', 0).owlCarousel ('refresh');
                                        clearInterval (bndInterval);
                                    }
                                }, 250);
                            });
                        </script>
                        <? endif; ?>
                        <? endif; ?>

                        <div class="clearfix hidden-xs"></div>
                        <br class="hidden-xs" />

                        <? if ($__fImage && $__fImage [0]): ?>
                        <li class="fImage__<?= ($__fImage [0] == 'SEFFAF_SAYDAM-BLACK')? 'BLACK': 'SILVER'; ?> image-additional hidden-xs">
                            <a class="thumbnail border-0" href="javascript: $('.thumbnails > .owl-carousel.fImage__BLACK--Carousel').trigger ('to.owl', [0, 300]);">
                                <img src="<?= $thumb; ?>" data-src="<?= $popup; ?>" />
                            </a>
                        </li>
                        <? else: ?>
                        <li class="image-additional hidden-xs">
                            <a class="thumbnail border-0" href="javascript: $('.thumbnails > .owl-carousel').trigger ('to.owl', [0, 300]);">
                                <img src="<?= $thumb; ?>" data-src="<?= $popup; ?>" />
                            </a>
                        </li>
                        <? endif; ?>
                        <?php foreach ($images as $index => $image): ?>
                        <?
          if ($product_type == 1)
            preg_match ('/(SEFFAF_SAYDAM-SILVER|SEFFAF_SAYDAM-BLACK)/', $image ['thumb'], $__fImage);
          else
            $__fImage = false;
        ?>
                        <? if ($__fImage && $__fImage [0]): ?>
                        <?
              $__fImageBlackCarouselIndex = 0;
              $__fImageSilverCarouselIndex = 0;
            ?>
                        <? if ($__fImage [0] == "SEFFAF_SAYDAM-BLACK"): ?>
                        <li class="fImage__BLACK image-additional hidden-xs">
                            <a class="thumbnail border-0" href="javascript: $('.thumbnails > .owl-carousel.fImage__BLACK--Carousel').trigger ('to.owl', [<?= $__fImageBlackCarouselIndex++; ?>, 300]);">
                                <img src="<?= $image['thumb']; ?>" data-src="<?= $image['popup']; ?>" />
                            </a>
                        </li>
                        <? elseif ($__fImage [0] == "SEFFAF_SAYDAM-SILVER"): ?>
                        <li class="fImage__SILVER image-additional hidden-xs">
                            <a class="thumbnail border-0" href="javascript: $('.thumbnails > .owl-carousel.fImage__SILVER--Carousel').trigger ('to.owl', [<?= $__fImageSilverCarouselIndex++; ?>, 300]);">
                                <img src="<?= $image['thumb']; ?>" data-src="<?= $image['popup']; ?>" />
                            </a>
                        </li>
                        <? else: ?>
                        <? endif; ?>
                        <? else: ?>
                        <li class="image-additional hidden-xs">
                            <a class="thumbnail border-0" href="javascript: $('.thumbnails > .owl-carousel').trigger ('to.owl', [<?= $index + 1; ?>, 300]);">
                                <?php if ($image['is_gif'] == "gif"){ ?>
                                    <img src="<?= $image['no_cache_image']; ?>" data-src="<?= $image['no_cache_image']; ?>" />
                                <?php }else{ ?>
                                    <img src="<?= $image['thumb']; ?>" data-src="<?= $image['popup']; ?>" />
                                <?php } ?>
                            </a>
                        </li>
                        <? endif; ?>
                        <?php endforeach; ?>

                    </ul>

                    <script>
                        jQuery (function ($) {
                            $('.thumbnails > .owl-carousel').owlCarousel ({
                                items: 1,
                                pagination: true
                            });
                        });
                    </script>

                    <script>
                        jQuery (function ($) {
                            $('.thumbnails').bind('contextmenu', function(e) {return false;});
                        });
                    </script>

                </div>
                <!-- Image Canvas -->

                <? if (substr ($model, 0, 3) == "kbr"){ ?>
                <style>
                    .designer-signature {
                        position: absolute;
                        z-index: 3;
                        max-width: 50px;
                    }
                    @media (max-width: 768px)
                    {
                        .designer-signature {
                            margin-top: -250px;
                            max-width: 50px;
                            right: -10px;
                        }
                    }
                </style>
                <img class="designer-signature" src="/image/imza.png" alt="designer" />
                <? }else if (substr ($model, 0, 5) == "cl038" || substr ($model, 0, 5) == "cl042" || substr ($model, 0, 5) == "cl009" || substr ($model, 0, 5) == "cl070" || substr ($model, 0, 5) == "cl007" || substr ($model, 0, 5) == "cl049" || substr ($model, 0, 5) == "cl047" || substr ($model, 0, 5) == "cl068" || substr ($model, 0, 5) == "cl048" || substr ($model, 0, 5) == "cl067" || substr ($model, 0, 5) == "cl036" || substr ($model, 0, 5) == "cl010" || substr ($model, 0, 5) == "cl013" || substr ($model, 0, 5) == "cl069" || substr ($model, 0, 5) == "cl071" || substr ($model, 0, 5) == "cl052" || substr ($model, 0, 6) == "lms218" || substr ($model, 0, 6) == "lms219" || substr ($model, 0, 6) == "lms048" || substr ($model, 0, 6) == "lms055" || substr ($model, 0, 6) == "lms026" || substr ($model, 0, 6) == "lms030" || substr ($model, 0, 6) == "imp018" || substr ($model, 0, 6) == "imp017" || substr ($model, 0, 6) == "imp020" || substr ($model, 0, 6) == "imp022" || substr ($model, 0, 6) == "imp023" || substr ($model, 0, 6) == "neon58" || substr ($model, 0, 4) == "aq56" || substr ($model, 0, 6) == "aq57" || substr ($model, 0, 6) == "slc028" || substr ($model, 0, 6) == "slc030" || substr ($model, 0, 6) == "slc029" || substr ($model, 0, 6) == "slc032" || substr ($model, 0, 6) == "slc026" || substr ($model, 0, 6) == "slc031" || substr ($model, 0, 6) == "slc027" || substr ($model, 0, 5) == "cl027" || substr ($model, 0, 5) == "cl002"){ ?>
                <? } ?>

                <?php if ($column_left || $column_right) { ?>
                <?php $class = 'col-sm-6'; ?>
                <?php } else { ?>
                <?php $class = 'col-sm-5 col-sm-push-1'; ?>
                <?php } ?>
                <div class="<?php echo $class; ?>">

                    <h1 class="mt-0 mb-3 PP__Title"><?php echo $heading_title; ?></h1>
                    <input type="hidden" name="product_id" value="<?=$product_id;?>" />
                    <input type="hidden" name="model" value="<?=$model;?>" />
                    <?=$model;?>
                    <?php if ($price) { ?>
                    <ul class="list-unstyled float-left">
                        <?php if (!$special) { ?>
                        <li>
                            <h3 class="d-inline PP__Price"><?php echo $price; ?></h3>
                            <?php if(!isset($campaig_not_include)){ ?>
                            <p class="campaign_text" style="font-weight: 700; color:red;"> - 3 Al 2 Öde! Ücretsiz Kargo!</p>
                            <p style="font-weight: 700;color:red;text-align: left;">Yazılı Ürünlerde Geçerlidir.</p>
                            <?php } ?>
                        </li>
                        <?php } else { ?>
                        <li>
                            <span style="text-decoration: line-through;"><?php echo $price; ?></span>
                            <h3 class="d-inline ml-5 PP__Price"><?php echo $special; ?></h3>
                            <?php if(!isset($campaig_not_include)){ ?>
                            <p class="campaign_text" style="font-weight: 700; color:red;"> - 3 Al 2 Öde! Ücretsiz Kargo!</p>
                            <p style="font-weight: 700;color:red;text-align: left;">Yazılı Ürünlerde Geçerlidir.</p>
                            <?php } ?>
                        </li>
                        <?php } ?>

                    </ul>
                    <?php } ?>
                    <script>
                        // Set the date we're counting down to
                        var countDownDate = new Date("Jul 23, 2021 23:59:59").getTime();

                        // Update the count down every 1 second
                        var x = setInterval(function() {

                            // Get today's date and time
                            var now = new Date().getTime();

                            // Find the distance between now and the count down date
                            var distance = countDownDate - now;

                            // Time calculations for days, hours, minutes and seconds
                            var days    = Math.floor(distance / (1000 * 60 * 60 * 24));
                            var hours   = Math.floor((distance % (1000 * 60 * 60 * 24 ) ) / (1000 * 60 * 60));
                            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

                            // Output the result in an element with id="hkcount"
                            document.getElementById("hkcount2").innerHTML = `4 Öl 2 Öde! Son `+ days + `g `+ hours + `s ` + minutes + `dk `+ seconds + `sn ` + ``;

                            // If the count down is over, write some text
                            if (distance < 0) {
                                clearInterval(x);
                                document.getElementById("hkcount2").innerHTML = "3 Al 2 Öde!";
                            }
                        }, 1000);
                    </script>
                    <!--
                              <button type="button" data-toggle="tooltip" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product_id; ?>');" class="btnWish"><i class="fa fa-heart-o"></i></button>
                    -->
                    <br />
                    <label class="PP__OptionTitle">Telefon Modelini Seçiniz</label>
                    <select class="CategorySelectbox ml-0 custom-0002" id="all_categories" >
                    </select>
                    <div class="CategorySelectbox__Appearance">
                        <i class="CategorySelectbox__AppearanceIcon fa fa-chevron-down"></i>
                    </div>

                    <select class="CategorySelectbox ml-10 custom-0002" id="sub_categories">
                    </select>
                    <div class="CategorySelectbox__Appearance">
                        <i class="CategorySelectbox__AppearanceIcon fa fa-chevron-down"></i>
                    </div>
                    <div class="<?= ($product_type == 0)? 'd-none': ''; ?>">
                        <label class="PP__OptionTitle">Bu Modeli Başka Bir Kılıfta Dene</label>
                        <div class="row px-15" id="attribute_cases">

                        </div>
                        <label class="PP__OptionTitle Disabled">Bu modeldeki stoklarımız tükenmiştir.</label>
                        <div class="clearfix"></div>
                        <br />
                    </div>
                    <div class="<?= (substr ($model, 0, 2) == 'mr')? 'd-none': ''; ?>">
                        <? if (substr ($model, 0, 2) == 'ps'){ ?>
                        <label class="PP__OptionTitle">Tutacak Ekle/Çıkar</label>
                        <? }else if ($sub_category_id == 5739){ ?>
                        <label class="PP__OptionTitle">Model Değiştir</label>
                        <? }else{ ?>
                        <label class="PP__OptionTitle">Kılıf Rengini Seçin</label>
                        <? } ?>
                        <div class="row px-15" id="attribute_color_cases"></div>
                        <div class="clearfix"></div>
                        <br />
                    </div>
                    <!-- -->
                    <?php if($product_type==7 || $product_type==9): ?>
                    <label class="PP__OptionTitle">Fotoğraf Yükleyin</label>
                    <div>
                        <form method="post" enctype="multipart/form-data"  class="uploader">
                            <input class="uploader__input d-none" id="custom_image" type="file" name="custom_image" accept="image/*" />
                            <label class="uploader__label" for="custom_image">
                                <div class="uploader__wrapper">
                                    <img class="uploader__file hidden" src="#" alt="">
                                    <svg class="uploader__svg" xmlns="http://www.w3.org/2000/svg" width="98px" height="90px" viewBox="0 0 98 90">
                                        <path class="uploader__clipalt" d="M47.559,12.453L9.966,50.05 c0,0-16.188,15.611-0.892,30.908c15.297,15.301,30.995-0.804,30.995-0.804l50.666-50.669c0,0,10.814-10.891-0.268-21.981 c-11.087-11.088-21.97-0.288-21.97-0.288L24.221,51.486c0,0-10.736,8.541-2.432,16.921c8.307,8.384,16.832-2.521,16.832-2.521 l32.535-32.531"/>
                                        <path class="uploader__clip" d="M47.559,12.453L9.966,50.05 c0,0-16.188,15.611-0.892,30.908c15.297,15.301,30.995-0.804,30.995-0.804l50.666-50.669c0,0,10.814-10.891-0.268-21.981 c-11.087-11.088-21.97-0.288-21.97-0.288L24.221,51.486c0,0-10.736,8.541-2.432,16.921c8.307,8.384,16.832-2.521,16.832-2.521 l32.535-32.531"/>
                                    </svg>
                                </div>
                            </label>
                        </form>
                        <br>

                    </div>
                    <?php if($product_type==9):  ?>
                    <div class="row">
                        <div class="col-md-3 styling"  id="" >
                            <canvas id="c_img" ></canvas>
                            Orignal
                        </div>
                        <div class="col-md-3 styling"  id="eda4b4b0-1b90-11e7-afe2-06d95fe194ed" >
                            <img src="https://www.deeparteffects.com/images/styles/rainbow.jpg" height="90" width="90">
                            <br>
                            Aurora
                        </div>
                        <div class="col-md-3 styling" id="c7984f92-1560-11e7-afe2-06d95fe194ed" >
                            <img src="https://www.deeparteffects.com/images/styles/1b43da79-2816-428d-a4bb-3390c83fb92d.jpg" height="90" width="90">
                            <br>
                            Epoch
                        </div>
                        <div class="col-md-3 styling" id="c7984d82-1560-11e7-afe2-06d95fe194ed" >
                            <img src="https://www.deeparteffects.com/images/styles/22b2a90e-9168-4dbe-880e-8a4e154c11a2.jpg" height="90" width="90">
                            <br>
                            Sketch 1
                        </div>
                        <div class="col-md-3 styling" id="c7985919-1560-11e7-afe2-06d95fe194ed" >
                            <img src="https://www.deeparteffects.com/images/styles/3e3ecdea-7c2c-4c2d-af7c-0a2509130dcf.jpg" height="90" width="90">
                            <br>
                            Mudita
                        </div>
                        <div class="col-md-3 styling" id="ed72c2f2-1b90-11e7-afe2-06d95fe194ed" >
                            <img src="https://www.deeparteffects.com/images/styles/346f3e09-c0ce-4d14-b42d-6301a09fb67a.jpg" height="90" width="90">
                            <br>
                            Beauty
                        </div>
                        <div class="col-md-3 styling" id="c7984b32-1560-11e7-afe2-06d95fe194ed" >
                            <img src="https://www.deeparteffects.com/images/styles/98e48555-abc4-432b-bcbc-605a097d5140.jpg" height="90" width="90">
                            <br>
                            Mosaic
                        </div>
                        <div class="col-md-3 styling" id="edb0fceb-1b90-11e7-afe2-06d95fe194ed" >
                            <img src="https://www.deeparteffects.com/images/styles/sketchy.jpg" height="90" width="90">
                            <br>
                            Cat
                        </div>
                        <div class="col-md-3 styling" id="c7985a74-1560-11e7-afe2-06d95fe194ed" >
                            <img src="https://www.deeparteffects.com/images/styles/faf67d2b-082d-4891-b087-ef4b34062977.jpg" height="90" width="90">
                            <br>
                            Dreamworld
                        </div>
                        <div class="col-md-3 styling" id="c7984d3c-1560-11e7-afe2-06d95fe194ed" >
                            <img src="https://www.deeparteffects.com/images/styles/0e915d45-83dc-47fe-9f2f-1c75e75601bd.jpg" height="90" width="90">
                            <br>
                            Abstract 1
                        </div>
                        <div class="col-md-3 styling" id="c7984cac-1560-11e7-afe2-06d95fe194ed" >
                            <img src="https://www.deeparteffects.com/images/styles/6644d1cc-3551-4237-a96a-1f5b5af21a63.jpg" height="90" width="90">
                            <br>
                            Modern Art
                        </div>
                    </div>
                    <?php endif; ?>
                    <?php endif; ?>
                    <?php if ($product_type == 1 || $product_type == 2 || $product_type == 3 || $product_type == 4 || $product_type == 6 || $product_type == 8): ?>
                    <style type="text/css">
                        .kisisellestir {width: 100%!important;color: #000000!important;background: #fff!important;border: 2px solid #000!important;margin-bottom: 10px;outline: none!important;}
                    </style>
                    <button type="button" class="btn btn-info kisisellestir efekt" data-toggle="collapse" data-target="#kisisellestir" onclick="$(this).removeClass ('efekt');"><i class="fa fa-hand-o-up" aria-hidden="true"></i> Tıkla ve Kişiselleştir</button>
                    <?php endif; ?>
                    <div id="kisisellestir" class="collapse">
                        <div class="PP__CustomizationText">
                            <? if ($product_type == 6): ?>
                            <input class="PP__CustomizationTextInput" type="text" name="customizetext2" id="customizetext2" placeholder="DOKUN VE BURAYA İSMİNİ YAZ" maxlength="10" />
                            <? endif; ?>
                            <input class="PP__CustomizationTextInput" type="text" name="customizetext" id="customizetext" placeholder="DOKUN VE BURAYA İSMİNİ YAZ" maxlength="15" />
                            <div class="PP__CustomizationTextColors">
                                <button class="PP__CustomizationTextColor PP__CustomizationTextColor--000000 PP__CustomizationTextColor--Active" data-color="000000"></button>
                                <button class="PP__CustomizationTextColor PP__CustomizationTextColor--FFFFFF" data-color="FFFFFF"></button>
                                <button class="PP__CustomizationTextColor PP__CustomizationTextColor--5F4D80" data-color="5F4D80"></button>
                                <button class="PP__CustomizationTextColor PP__CustomizationTextColor--133168" data-color="133168"></button>
                                <button class="PP__CustomizationTextColor PP__CustomizationTextColor--FFC3D0" data-color="FFC3D0"></button>
                                <button class="PP__CustomizationTextColor PP__CustomizationTextColor--FF43A5" data-color="FF43A5"></button>
                                <button class="PP__CustomizationTextColor PP__CustomizationTextColor--FA6827" data-color="FA6827"></button>
                                <button class="PP__CustomizationTextColor PP__CustomizationTextColor--F4CE11" data-color="F4CE11"></button>
                                <button class="PP__CustomizationTextColor PP__CustomizationTextColor--F8F4CA" data-color="F8F4CA"></button>
                                <button class="PP__CustomizationTextColor PP__CustomizationTextColor--B8DEC6" data-color="B8DEC6"></button>
                                <button class="PP__CustomizationTextColor PP__CustomizationTextColor--CAE8EA" data-color="CAE8EA"></button>
                                <button class="PP__CustomizationTextColor PP__CustomizationTextColor--C8AFD5" data-color="C8AFD5"></button>
                            </div>
                            <input type="hidden" name="customizeColor" id="customizeColor">
                            <input type="hidden" name="customizeFont" id="customizeFont">
                            <input type="hidden" name="customizetextPosition" id="customizetextPosition">
                            <div class="d-flex justify-content-between">
                                <div class="PP__CustomizationTextFonts">
                                    <button class="PP__CustomizationTextFont PP__CustomizationTextFont--Glitter PP__CustomizationTextFont--Active" data-font="Glitter">a</button>
                                    <button class="PP__CustomizationTextFont PP__CustomizationTextFont--RobotoMono" data-font="RobotoMono">a</button>
                                    <button class="PP__CustomizationTextFont PP__CustomizationTextFont--Runway" data-font="Runway">a</button>
                                    <!--                                <button class="PP__CustomizationTextFont PP__CustomizationTextFont--Besiktas" data-font="Besiktas">a</button>-->
                                </div>
                                <div class="PP__CustomizationTextPositions" style="display: none">
                                    <?php if ($product_type != 4 && $product_type != 6): ?>
                                    <button class="PP__CustomizationTextPosition PP__CustomizationTextPosition--Center" data-position="Center"></button>
                                    <?php if ($product_type !=8): ?>
                                    <button class="PP__CustomizationTextPosition PP__CustomizationTextPosition--Bottom" data-position="Bottom"></button>
                                    <?php endif; ?>
                                    <?php elseif($product_type == 4): ?>
                                    <button class="PP__CustomizationTextPosition PP__CustomizationTextPosition--Horizontal" data-position="Horizontal"></button>
                                    <button class="PP__CustomizationTextPosition PP__CustomizationTextPosition--Vertical" data-position="Vertical"></button>
                                    <button class="PP__CustomizationTextPosition PP__CustomizationTextPosition--VerticalRight Right" data-position="VerticalRight" ></button>
                                    <?php endif; ?>
                                </div>
                            </div>
                            <script>

                                window ['multiple'] = 1.25;

                                jQuery (function ($) {

                                    var dikeyYazmadaBekle;

                                    // .PP__CustomizationTextInput#customizetext: Change
                                    $('.PP__CustomizationTextInput#customizetext').keyup (function () {

                                        $(this).val ($(this).val ().replace (/[^a-zA-Z0-9üÜğĞıİşŞçÇöÖ\!\'\#\$\%\&\/\(\)\=\?\-\.\,\;\"\*\:\<\>\^\€\₺\ ]/g, ''));

                                        if($('#customizetextPosition').val()!='Vertical' && $('#customizetextPosition').val()!='VerticalRight'){
                                            if($('#product_type').val()==4){
                                                $('.Second_Layer').attr('src','');
                                            }

                                            if ($('#CustomizationText').hasClass ('TextFont--Glitter') && $(this).val () != '') $('#CustomizationText').text ('[' + $(this).val () + ']');
                                            else $('#CustomizationText').text ($(this).val ());

                                            if ($(this).val () != '')
                                            {
                                                var tc = trimCanvas ().width;

                                                $('.thumbnails > .owl-carousel').trigger ('to.owl', [0, 300]);

                                                if ($('#CustomizationText').hasClass ('TextPosition--Vertical'))
                                                    if (768 < $(window).width ()) targetWidth = 440;
                                                    else targetWidth = 265 / window ['multiple'];
                                                if ($('#CustomizationText').hasClass ('TextPosition--VerticalRight'))
                                                    if (768 < $(window).width ()) targetWidth = 440;
                                                    else targetWidth = 265 / window ['multiple'];

                                                else
                                                if (768 < $(window).width ()) targetWidth = $('#CustomizationText').hasClass ('TextFont--Glitter')? tc * 0.44: tc * 0.24;
                                                else targetWidth = ($('#CustomizationText').hasClass ('TextFont--Glitter')? tc * 0.45: tc * 0.1) / window ['multiple'];

                                                $('#CustomizationText').css ('font-size', '1px');
                                                if ($('#CustomizationText').hasClass ('TextFont--Glitter'))
                                                {
                                                    do {
                                                        $('#CustomizationText').css ({
                                                            'font-size': (parseInt($('#CustomizationText').css ('font-size')) + 1) + "px",
                                                            'line-height': (parseInt($('#CustomizationText').css ('font-size')) + 1) + "px"
                                                        });
                                                    } while ($('#CustomizationText').width () <= targetWidth);
                                                }

                                                else
                                                {
                                                    if ($('#CustomizationText').hasClass ('TextFont--Besiktas'))
                                                    {
                                                        $('#CustomizationText').css ({
                                                            'font-size': "40px",
                                                            'line-height': "60px",
                                                            'text-transform': "lowercase"
                                                        });

                                                    }else{
                                                        var mFark = 24 - $('#CustomizationText').text ().length / 2;
                                                        if (768 < $(window).width ()) $('#CustomizationText').css ('font-size', mFark + 'px');
                                                        else $('#CustomizationText').css ('font-size', (mFark / window ['multiple']) + 'px');
                                                    }
                                                }
                                            }

                                        }

                                        else{
                                            $('#CustomizationText').text ('');

                                            clearTimeout (dikeyYazmadaBekle);
                                            dikeyYazmadaBekle = setTimeout (function () {
                                                var customizetextPosition= $('#customizetextPosition').val();
                                                var product_type=  $("input[name='product_type']").val();

                                                if(product_type==4  && customizetextPosition=='Vertical'){

                                                    var customizetext=  $('#customizetext').val();
                                                    var customizeFont=  $('#customizeFont').val();
                                                    var ref_img=  $('#ref_img').val();
                                                    var customizeColor=  $('#customizeColor').val();
                                                    var pattern_mask=  $('#pattern_mask').val();
                                                    var product_id = $('[name="product_id"]').val ();
                                                    var model = $('[name="model"]').val ();
                                                    $('#img_loader').show();

                                                    $.ajax({
                                                        url: 'index.php?route=piyerSoft/cases/getverticaltextimage',
                                                        type: 'post',
                                                        data: { customizetext : customizetext,customizeFont:customizeFont,customizeColor:customizeColor,product_mask:pattern_mask,ref_img:ref_img, product_id: product_id, model: model },
                                                        dataType: 'json',
                                                        success: function(json) {
                                                            // $('#pimage, #trimImage').attr('src','');
                                                            $('.Second_Layer').attr('src',json['src']);
                                                            $('#ref_img').val(json['ref']);
                                                            $('#img_loader').hide();
                                                        },
                                                        error: function (xhr, ajaxOptions, thrownError) {
                                                            $('#img_loader').hide();
                                                            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                                                        }
                                                    });
                                                }
                                                else if(product_type==4 && customizetextPosition=='VerticalRight'){

                                                    var customizetext=  $('#customizetext').val();
                                                    var customizeFont=  $('#customizeFont').val();
                                                    var ref_img=  $('#ref_img').val();
                                                    var customizeColor=  $('#customizeColor').val();
                                                    var pattern_mask=  $('#pattern_mask').val();
                                                    var product_id = $('[name="product_id"]').val ();
                                                    var model = $('[name="model"]').val ();
                                                    $('#img_loader').show();
                                                    $.ajax({
                                                        url: 'index.php?route=piyerSoft/cases/getverticalrighttextimage',
                                                        type: 'post',
                                                        data: { customizetext : customizetext,customizeFont:customizeFont,customizeColor:customizeColor,product_mask:pattern_mask,ref_img:ref_img, product_id: product_id, model: model },
                                                        dataType: 'json',
                                                        success: function(json) {
                                                            // $('#pimage, #trimImage').attr('src','');
                                                            $('.Second_Layer').attr('src',json['src']);
                                                            $('#ref_img').val(json['ref']);
                                                            $('#img_loader').hide();
                                                        },
                                                        error: function (xhr, ajaxOptions, thrownError) {
                                                            $('#img_loader').hide();
                                                            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                                                        }
                                                    });
                                                }


                                            }, 500);
                                        }

                                    });

                                    <? if ($product_type == 6): ?>
                                    $('.PP__CustomizationTextInput#customizetext2').keyup (function () {

                                        $(this).val ($(this).val ().replace (/[^a-zA-Z0-9üÜğĞıİşŞçÇöÖ\!\'\#\$\%\&\/\(\)\=\?\-\.\,\;\"\*\:\<\>\^\€\₺\ ]/g, ''));
                                        if ($('#CustomizationText--Second').hasClass ('TextFont--Glitter') && $(this).val () != '') $('#CustomizationText--Second').text ('[' + $(this).val () + ']');
                                        else $('#CustomizationText--Second').text ($(this).val ());

                                        if ($(this).val () != '')
                                        {
                                            var tc = trimCanvas ().width;

                                            $('.thumbnails > .owl-carousel').trigger ('to.owl', [0, 300]);

                                            if ($('#CustomizationText--Second').hasClass ('TextPosition--Vertical'))
                                                if (768 < $(window).width ()) targetWidth = 440;
                                                else targetWidth = 265 / window ['multiple'];


                                            if (768 < $(window).width ()) targetWidth = $('#CustomizationText--Second').hasClass ('TextFont--Glitter')? tc * 0.44: tc * 0.24;
                                            else targetWidth = ($('#CustomizationText--Second').hasClass ('TextFont--Glitter')? tc * 0.45: tc * 0.1) / window ['multiple'];

                                            $('#CustomizationText--Second').css ('font-size', '1px');
                                            if ($('#CustomizationText--Second').hasClass ('TextFont--Glitter'))
                                            {
                                                do {
                                                    $('#CustomizationText--Second').css ({
                                                        'font-size': (parseInt($('#CustomizationText--Second').css ('font-size')) + 1) + "px",
                                                        'line-height': (parseInt($('#CustomizationText--Second').css ('font-size')) + 1) + "px"
                                                    });
                                                } while ($('#CustomizationText--Second').width () <= targetWidth);
                                            }

                                            else
                                            if (768 < $(window).width ()) $('#CustomizationText--Second').css ('font-size', '20px');
                                            else $('#CustomizationText--Second').css ('font-size', (24 / window ['multiple']) + 'px');
                                        }





                                    });

                                    <? endif; ?>

                                    // .PP__CustomizationTextColor: Click
                                    $('.PP__CustomizationTextColor').click (function () {
                                        $('#customizeColor').val($(this).attr('data-color'));
                                        $('#CustomizationText')
                                            .removeClass (function (index, className) {
                                                return (className.match (/(^|\s)TextColor--\S+/g) || []).join(' ');
                                            })
                                            .addClass ('TextColor--' + $(this).attr ('data-color'));
                                        $('#CustomizationText--Second')
                                            .removeClass (function (index, className) {
                                                return (className.match (/(^|\s)TextColor--\S+/g) || []).join(' ');
                                            })
                                            .addClass ('TextColor--' + $(this).attr ('data-color'));

                                        $('.PP__CustomizationTextColor--Active').removeClass ('PP__CustomizationTextColor--Active');
                                        $(this).addClass ('PP__CustomizationTextColor--Active');
                                    });

                                    // .PP__CustomizationTextFont: Click
                                    $('.PP__CustomizationTextFont').click (function () {
                                        $('#customizeFont').val($(this).attr('data-font'));
                                        $('#CustomizationText')
                                            .removeClass (function (index, className) {
                                                return (className.match (/(^|\s)TextFont--\S+/g) || []).join(' ');
                                            })
                                            .addClass ('TextFont--' + $(this).attr ('data-font'));
                                        $('#CustomizationText--Second')
                                            .removeClass (function (index, className) {
                                                return (className.match (/(^|\s)TextFont--\S+/g) || []).join(' ');
                                            })
                                            .addClass ('TextFont--' + $(this).attr ('data-font'));

                                        $('.PP__CustomizationTextFont--Active').removeClass ('PP__CustomizationTextFont--Active');
                                        $(this).addClass ('PP__CustomizationTextFont--Active');

                                        if ($('#customizetextPosition').val () != 'Vertical')
                                        {
                                            $('.PP__CustomizationTextInput').trigger ('keyup');
                                            setTimeout (function () {$('.PP__CustomizationTextInput').trigger ('keyup')}, 500);
                                            setTimeout (function () {$('.PP__CustomizationTextInput').trigger ('keyup')}, 1000);
                                        }
                                        if ($('#customizetextPosition').val () != 'VerticalRight')
                                        {
                                            $('.PP__CustomizationTextInput').trigger ('keyup');
                                            setTimeout (function () {$('.PP__CustomizationTextInput').trigger ('keyup')}, 500);
                                            setTimeout (function () {$('.PP__CustomizationTextInput').trigger ('keyup')}, 1000);
                                        }
                                    });

                                    // .PP__CustomizationTextPosition: Click
                                    $('.PP__CustomizationTextPosition').click (function () {
                                        $('#customizetextPosition').val($(this).attr('data-position'));
                                        $('#CustomizationText')
                                            .removeClass (function (index, className) {
                                                return (className.match (/(^|\s)TextPosition--\S+/g) || []).join(' ');
                                            })
                                            .addClass ('TextPosition--' + $(this).attr ('data-position'));

                                        $('.PP__CustomizationTextInput').trigger ('keyup');
                                    });

                                });
                            </script>
                        </div>
                        <!-- -->

                        <div class="PP__CustomizationText gradient" style="display: none">
                            <input class="PP__CustomizationTextInput" type="text" name="gradienttext" id="gradienttext" placeholder="DOKUN VE BURAYA HARFİNİ YAZ" maxlength="3" />
                            <input type="hidden" name="texture" id="texture" value="1.jpg" />
                            <input type="hidden" name="ref_img" id="ref_img">
                            <label class="pt-10 pb-2 ml-10">HARFİNİN RENGİNİ DEĞİŞTİR</label>
                            <div class="" style="padding-bottom: 10px;">
                                <span class="ml-10"><img class="texture texture--Active" height="30" width="30" src="<?php echo $texture1 ?>" data-texture="1" > </span>
                                <span class="ml-10"><img class="texture" height="30" width="30" src="<?php echo $texture2 ?>" data-texture="2" > </span>
                                <span class="ml-10"><img class="texture" height="30" width="30" src="<?php echo $texture3 ?>" data-texture="3" > </span>
                                <span class="ml-10"><img class="texture" height="30" width="30" src="<?php echo $texture4 ?>" data-texture="4" > </span>
                                <span class="ml-10"><img class="texture" height="30" width="30" src="<?php echo $texture5 ?>" data-texture="5" > </span>
                                <span class="ml-10"><img class="texture" height="30" width="30" src="<?php echo $texture6 ?>" data-texture="6" > </span>
                                <span class="ml-10"><img class="texture" height="30" width="30" src="<?php echo $texture7 ?>" data-texture="7" > </span>
                                <span class="ml-10"><img class="texture" height="30" width="30" src="<?php echo $texture8 ?>" data-texture="8" > </span>
                            </div>
                        </div>
                        <button id="kisisellestir--kapat" class="btn btn-default d-none">
                            <i class="fa fa-times"></i>
                        </button>
                        <script>
                            jQuery (function ($) {
                                $('.kisisellestir').click (function () {
                                    if ($(window).width () <= 768)
                                    {
                                        $('#canvas_media img, .Second_Layer, .thumbnails video, .PP__Image, .pimageWITHvideo').addClass ('_wah-500');
                                        window ['multiple'] = 1;
                                        $('.PP__CustomizationTextInput').trigger ('keyup');

                                        $('.cc-revoke').remove ();

                                        $('#kisisellestir').css ({
                                            'background-color': '#FFF',
                                            'position': 'fixed',
                                            'padding': '10px',
                                            'width': '100%',
                                            'z-index': 9999,
                                            'bottom': 0,
                                            'left': 0
                                        });
                                        $('.thumbnails').css ({
                                            'padding': '20px 42px 250px',
                                            'background-color': '#FFF',
                                            'overflow-y': 'scroll',
                                            'position': 'fixed',
                                            'z-index': '9998',
                                            'height': '100vh',
                                            'left': '-15px',
                                            'top': '60px'
                                        });

                                        $('#kisisellestir--kapat').removeClass ('d-none');
                                        $('#ScrollToTop, footer').addClass ('d-none');

                                        <? if ($product_type == 2): ?>
                                        $('#kisisellestir').prepend (
                                            '<ul id="KisisellestirSekmeleri" class="nav nav-tabs mb-10">' +
                                            '<li role="presentation" class="active"><a class="KisisellestirSekmeBTN" href="javascript:;">İsmini Yaz</a></li>' +
                                            '<li role="presentation"><a class="KisisellestirSekmeBTN" href="javascript:;">Harfini Yaz</a></li>' +
                                            '</ul>'
                                        );

                                        $('#kisisellestir .KisisellestirSekmeBTN').click (function () {
                                            $('.KisisellestirSekmeBTN').parent ().removeClass ('active');
                                            $(this).parent ().addClass ('active');

                                            $('.PP__CustomizationText').hide ();
                                            $('.PP__CustomizationText').eq ($(this).parent ().index ()).show ();
                                        });

                                        $('.PP__CustomizationText').each (function (Index, Item) {
                                            if (Index) $(Item).hide ();
                                        });

                                        $('.KisisellestirSekmeBTN').last ().click ();
                                        <? endif; ?>

                                        $('#CustomizationText, #CustomizationText--Second').addClass ('_wah-500');
                                        $(document).scrollTop(1);
                                    }
                                });

                                $('#kisisellestir--kapat').click (function () {
                                    $('#canvas_media img, .Second_Layer, .thumbnails video, .PP__Image, .pimageWITHvideo').removeClass ('_wah-500');
                                    window ['multiple'] = 1.25;
                                    $('.PP__CustomizationTextInput').trigger ('keyup');

                                    $('.thumbnails, #kisisellestir').removeAttr ('style');
                                    $('#kisisellestir--kapat').addClass ('d-none');
                                    $('#kisisellestir').removeClass ('in');
                                    $('#ScrollToTop, footer').removeClass ('d-none');
                                    $("html, body").animate ({scrollTop: 0}, 300);

                                    <? if ($product_type == 2): ?>
                                    $('#KisisellestirSekmeleri').remove ();
                                    $('.PP__CustomizationText').show ();
                                    <? endif; ?>

                                    $('#CustomizationText, #CustomizationText--Second').removeClass ('_wah-500');

                                    <? if ($product_type == 4): ?>
                                    $('.Second_Layer').hide (250).show (250);
                                    setTimeout (function () {
                                        $('.Second_Layer').hide (250).show (250);
                                    }, 1000);
                                    <? endif; ?>
                                });

                                $('.PP__CustomizationTextInput').click (function () {
                                    if ($(window).width () <= 768)
                                        $(".thumbnails").animate ({scrollTop: $('#CustomizationText').offset ().top - 250}, 500);
                                });
                                $(".thumbnails").animate ({scrollTop: $('#CustomizationText').offset ().top - 250}, 500);
                            });
                        </script>
                    </div>

                    <input type="hidden" name="customer_order_image" id="customer_order_image">
                    <div id="product">
                        <input type="hidden" name="pattern_url" id="pattern_url">
                        <input type="hidden" name="product_image" id="product_image">

                        <input type="hidden" name="pattern_mask" id="pattern_mask">
                        <input type="hidden" name="order_img" id="order_img">

                        <?php if ($options) { ?>
                        <div id="options">
                            <hr class="m-0" />
                            <h3>Mevcut Beden Seçenği</h3>
                            <?php foreach ($options as $option) { ?>
                            <?php if ($option['type'] == 'select') { ?>
                            <div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
                                <label class="control-label" for="input-option<?php echo $option['product_option_id']; ?>"><?php echo $option['name']; ?></label>
                                <select name="option[<?php echo $option['product_option_id']; ?>]" id="input-option<?php echo $option['product_option_id']; ?>" class="form-control">
                                    <option value=""><?php echo $text_select; ?></option>
                                    <?php foreach ($option['product_option_value'] as $option_value) { ?>
                                    <option value="<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
                                        <?php if ($option_value['price']) { ?>
                                        (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                                        <?php } ?>
                                    </option>
                                    <?php } ?>
                                </select>
                            </div>
                            <?php } ?>
                            <?php if ($option['type'] == 'radio') { ?>
                            <div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
                                <label class="control-label"><?php echo $option['name']; ?></label>
                                <div id="input-option<?php echo $option['product_option_id']; ?>">
                                    <?php foreach ($option['product_option_value'] as $option_value) { ?>
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
                                            <?php if ($option_value['image']) { ?>
                                            <img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" />
                                            <?php } ?>
                                            <?php echo $option_value['name']; ?>
                                            <?php if ($option_value['price']) { ?>
                                            (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                                            <?php } ?>
                                        </label>
                                    </div>
                                    <?php } ?>
                                </div>
                            </div>
                            <?php } ?>
                            <?php if ($option['type'] == 'checkbox') { ?>
                            <div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
                                <label class="control-label"><?php echo $option['name']; ?></label>
                                <div id="input-option<?php echo $option['product_option_id']; ?>">
                                    <?php foreach ($option['product_option_value'] as $option_value) { ?>
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" name="option[<?php echo $option['product_option_id']; ?>][]" value="<?php echo $option_value['product_option_value_id']; ?>" />
                                            <?php if ($option_value['image']) { ?>
                                            <img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" />
                                            <?php } ?>
                                            <?php echo $option_value['name']; ?>
                                            <?php if ($option_value['price']) { ?>
                                            (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                                            <?php } ?>
                                        </label>
                                    </div>
                                    <?php } ?>
                                </div>
                            </div>
                            <?php } ?>
                            <?php } ?>
                        </div>
                        <?php } ?>
                        <div class="form-group">
                            <label class="control-label d-none" for="input-quantity"><?php echo $entry_qty; ?></label>
                            <input type="text" name="quantity" value="<?php echo $minimum; ?>" size="2" id="input-quantity" class="form-control d-none" />
                            <input type="hidden" name="product_id" value="<?php echo $product_id; ?>" />
                            <input type="hidden" name="product_type" id="product_type" value="<?php echo $product_type; ?>" />
                            <input type="hidden" name="product_id_n" value="<?php echo $product_id; ?>" />
                            <input type="hidden" name="pre_attrib" value="<?php echo $color_attr_id; ?>" />
                            <input type="hidden" name="pre_case_attrib" value="<?php echo $collection_attr_id; ?>" />
                            <button type="button" id="button-cart" data-loading-text="<?php echo $text_loading; ?>" class="PP__Button btn btn-primary btn-lg disabled"><?php echo $button_cart; ?></button>
                            <button type="button" id="button-checkout" data-loading-text="<?php echo $text_loading; ?>" class="PP__Button PP__Button--Green btn btn-primary btn-lg px-15 pull-right disabled"><?= $text_buynow; ?></button>
                            <button type="button" id="button-nostock" class="PP__Button btn btn-primary btn-lg w-100 d-none">Stokta Yok</button>
                            <!-- AddThis: Begin -->
                            <div id="AddThis">
                                <style>
                                    .addthis_inline_share_toolbox_rasr {
                                        margin: 20px auto -10px;
                                        text-align: center;
                                    }
                                </style>
                                <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5b192f0745ddce4f"></script>
                                <div class="addthis_inline_share_toolbox_rasr"></div>
                            </div>
                            <!-- AddThis: End -->
                            <?php if ($minimum > 1) { ?>
                            <div class="alert alert-info"><i class="fa fa-info-circle"></i> <?php echo $text_minimum; ?></div>
                            <?php } ?>
                            <?php echo $content_top; ?>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>
                <br />

                <ul class="nav nav-tabs mb-0 custom-0005">
                    <li class="active"><a href="#tab-description" data-toggle="tab"><?php echo $tab_description; ?></a></li>
                    <?php if ($attribute_groups) { ?>
                    <li><a href="#tab-specification" data-toggle="tab"><?php echo $tab_attribute; ?></a></li>
                    <?php } ?>
                    <?php if ($review_status) { ?>
                    <li><a href="#tab-review" data-toggle="tab"><?php echo $tab_review; ?></a></li>
                    <?php } ?>
                </ul>
                <div class="tab-content p-10 bgc-f2f2f2 custom-0006">
                    <div class="tab-pane active" id="tab-description"><?php echo $description; ?></div>
                    <?php if ($attribute_groups) { ?>
                    <div class="tab-pane" id="tab-specification">
                        <table class="table table-bordered bgc-fff">
                            <?php foreach ($attribute_groups as $attribute_group) { ?>
                            <thead>
                            <tr>
                                <td colspan="2"><strong><?php echo $attribute_group['name']; ?></strong></td>
                            </tr>
                            </thead>
                            <tbody>
                            <?php foreach ($attribute_group['attribute'] as $attribute) { ?>
                            <tr>
                                <td><?php echo $attribute['name']; ?></td>
                                <td><?php echo $attribute['text']; ?></td>
                            </tr>
                            <?php } ?>
                            </tbody>
                            <?php } ?>
                        </table>
                    </div>
                    <?php } ?>
                    <?php if ($review_status) { ?>
                    <div class="tab-pane" id="tab-review">
                        <form class="form-horizontal" id="form-review">
                            <!--   richsnipt chnage-->
                            <div id="review">
                                <?php if ($reviews_first['reviews']) {
                                 if ( count($reviews_first['reviews']) > 5 ) {
                                $reviews_first_page = array_slice($reviews_first['reviews'], 0, 5);
                                } else { $reviews_first_page = $reviews_first['reviews']; }
                                ?>
                                <?php foreach ($reviews_first_page as $review) { ?>
                                <table class="table table-striped table-bordered">
                                    <tr>
                                        <td style="width: 50%;"><strong><?php echo $review['author']; ?></strong></td>
                                        <td class="text-right"><?php echo $review['date_added']; ?></td>
                                    </tr>
                                    <tr>
                                        <td colspan="2"><p><?php echo $review['text']; ?></p>
                                            <?php for ($i = 1; $i <= 5; $i++) { ?>
                                            <?php if ($review['rating'] < $i) { ?>
                                            <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
                                            <?php } else { ?>
                                            <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
                                            <?php } ?>
                                            <?php } ?></td>
                                    </tr>
                                </table>
                                <?php } ?>
                                <div class="text-right"><?php echo $reviews_first['pagination']; ?></div>
                                <?php } else { ?>
                                <p><?php echo $reviews_first['text_no_reviews']; ?></p>
                                <?php } ?>
                            </div>
                            <h2><?php echo $text_write; ?></h2>
                            <?php if ($review_guest) { ?>
                            <div class="form-group required">
                                <div class="col-sm-12">
                                    <label class="control-label" for="input-name"><?php echo $entry_name; ?></label>
                                    <input type="text" name="name" value="<?php echo $customer_name; ?>" id="input-name" class="form-control" />
                                </div>
                            </div>
                            <div class="form-group required">
                                <div class="col-sm-12">
                                    <label class="control-label" for="input-review"><?php echo $entry_review; ?></label>
                                    <textarea name="text" rows="5" id="input-review" class="form-control"></textarea>
                                    <div class="help-block"><?php echo $text_note; ?></div>
                                </div>
                            </div>
                            <div class="form-group required">
                                <div class="col-sm-12">
                                    <style>
                                        #Reytingsss {}
                                        #Reytingsss .rating-group {display: inline-flex;}
                                        #Reytingsss .rating__icon {pointer-events: none;}
                                        #Reytingsss .rating__input {position: absolute !important; left: -9999px !important;}
                                        #Reytingsss .rating__input--none {display: none;}
                                        #Reytingsss .rating__label {cursor: pointer; padding: 0 0.1em; font-size: 2rem;}
                                        #Reytingsss .rating__icon--star {color: orange; font-size: 2rem;}
                                        #Reytingsss .rating__input:checked ~ .rating__label .rating__icon--star {color: #DDD;}
                                        #Reytingsss .rating-group:hover .rating__label .rating__icon--star {color: orange;}
                                        #Reytingsss .rating__input:hover ~ .rating__label .rating__icon--star {color: #DDD;}
                                    </style>
                                    <div id="Reytingsss">
                                        <div class="rating-group">
                                            <input disabled checked class="rating__input rating__input--none" name="rating" id="rating-none" value="0" type="radio">
                                            <label aria-label="1 star" class="rating__label" for="rating-1"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
                                            <input class="rating__input" name="rating" id="rating-1" value="1" type="radio">
                                            <label aria-label="2 stars" class="rating__label" for="rating-2"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
                                            <input class="rating__input" name="rating" id="rating-2" value="2" type="radio">
                                            <label aria-label="3 stars" class="rating__label" for="rating-3"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
                                            <input class="rating__input" name="rating" id="rating-3" value="3" type="radio">
                                            <label aria-label="4 stars" class="rating__label" for="rating-4"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
                                            <input class="rating__input" name="rating" id="rating-4" value="4" type="radio">
                                            <label aria-label="5 stars" class="rating__label" for="rating-5"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
                                            <input class="rating__input" name="rating" id="rating-5" value="5" type="radio">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <?php echo $captcha; ?>
                            <div class="buttons clearfix">
                                <div class="pull-right">
                                    <button type="button" id="button-review" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-primary"><?php echo $button_continue; ?></button>
                                </div>
                            </div>
                            <?php } else { ?>
                            <?php echo $text_login; ?>
                            <?php } ?>
                        </form>
                    </div>
                    <?php } ?>
                </div>

                <?php if ($products) { ?>
                <h3><?php echo $text_related; ?></h3>
                <div class="row">
                    <?php $i = 0; ?>
                    <?php foreach ($products as $product) { ?>
                    <?php if ($column_left && $column_right) { ?>
                    <?php $class = 'col-xs-8 col-sm-6'; ?>
                    <?php } elseif ($column_left || $column_right) { ?>
                    <?php $class = 'col-xs-6 col-md-4'; ?>
                    <?php } else { ?>
                    <?php $class = 'col-xs-6 col-sm-3'; ?>
                    <?php } ?>
                    <div class="<?php echo $class; ?>">
                        <div class="product-thumb transition">
                            <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive" /></a></div>
                            <div class="caption">
                                <h4><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></h4>
                                <p><?php echo $product['description']; ?></p>
                                <?php if ($product['rating']) { ?>
                                <div class="rating">
                                    <?php for ($j = 1; $j <= 5; $j++) { ?>
                                    <?php if ($product['rating'] < $j) { ?>
                                    <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span>
                                    <?php } else { ?>
                                    <span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
                                    <?php } ?>
                                    <?php } ?>
                                </div>
                                <?php } ?>
                                <?php if ($product['price']) { ?>
                                <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 } ?>
                                    <?php if ($product['tax']) { ?>
                                    <span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span>
                                    <?php } ?>
                                </p>
                                <?php } ?>
                            </div>
                            <div class="button-group">
                                <button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>', '<?php echo $product['minimum']; ?>');"><span class="hidden-xs hidden-sm hidden-md"><?php echo $button_cart; ?></span> <i class="fa fa-shopping-cart"></i></button>
                                <button type="button" data-toggle="tooltip" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-heart"></i></button>
                                <button type="button" data-toggle="tooltip" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-exchange"></i></button>
                            </div>
                        </div>
                    </div>
                    <?php if (($column_left && $column_right) && (($i+1) % 2 == 0)) { ?>
                    <div class="clearfix visible-md visible-sm"></div>
                    <?php } elseif (($column_left || $column_right) && (($i+1) % 3 == 0)) { ?>
                    <div class="clearfix visible-md"></div>
                    <?php } elseif (($i+1) % 4 == 0) { ?>
                    <div class="clearfix visible-md"></div>
                    <?php } ?>
                    <?php $i++; ?>
                    <?php } ?>
                </div>
                <?php } ?>
                <?php if ($tags) { ?>
                <p><?php echo $text_tags; ?>
                    <?php for ($i = 0; $i < count($tags); $i++) { ?>
                    <?php if ($i < (count($tags) - 1)) { ?>
                    <a href="<?php echo $tags[$i]['href']; ?>"><?php echo $tags[$i]['tag']; ?></a>,
                    <?php } else { ?>
                    <a href="<?php echo $tags[$i]['href']; ?>"><?php echo $tags[$i]['tag']; ?></a>
                    <?php } ?>
                    <?php } ?>
                </p>
                <?php } ?>
                <?php echo $content_bottom; ?></div>
            <?php echo $column_right; ?></div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script>
    console.log('hello hafi?');
    var _changeInterval = null;
    if($('#product_type').val()=='2' || $('#product_type').val()=='3')
    {
        $("#gradienttext").keyup(function() {

            clearInterval(_changeInterval)
            _changeInterval = setInterval(function() {
                clearInterval(_changeInterval)
                var customizeColor=  $('#customizeColor').val();
                var texture = $('#texture').val ();
                var gradienttext=  $('#gradienttext').val();
                var product_image=  $('#product_image').val();
                var ref_img=  $('#ref_img').val();
                var product_type=  $("input[name='product_type']").val();
                $.ajax({
                    url: 'index.php?route=piyerSoft/cases/getimage',
                    type: 'post',
                    data: { gradienttext : gradienttext,texture:texture,product_type:product_type,customizeColor:customizeColor,product_image:product_image,ref_img:ref_img },
                    dataType: 'json',
                    success: function(json) {
                        $('#pimage').attr('src',json['src']);
                        $('#ref_img').val(json['ref']);
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        $('#img_loader').hide();
                        alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                    }
                });
            }, 300);

        });
        $('.texture').on('click', function () {
            $('.texture--Active').removeClass ('texture--Active');
            $(this).addClass ('texture--Active');

            var filename=$(this).attr('src').substring($(this).attr('src').lastIndexOf('/')+1);
            $('#texture').val(filename);
            var gradienttext=  $('#gradienttext').val();
            var customizeColor=  $('#customizeColor').val();
            var product_image=  $('#product_image').val();
            var product_type=  $("input[name='product_type']").val();
            var ref_img=  $('#ref_img').val();
            $('#img_loader').show();
            $.ajax({
                url: 'index.php?route=piyerSoft/cases/getimage',
                type: 'post',
                data: { gradienttext : gradienttext,texture:filename,product_type:product_type,customizeColor:customizeColor,product_image:product_image,ref_img:ref_img },
                dataType: 'json',
                success: function(json) {
                    //$('#pimage, #trimImage').attr('src','');
                    $('#pimage, #trimImage').attr('src',json['src']);
                    $('#ref_img').val(json['ref']);
                    $('#img_loader').hide();
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    $('#img_loader').hide();
                    alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                }
            });

        });
    }

    $('.PP__CustomizationTextColor').click (function () {
        var product_type=  $("input[name='product_type']").val();
        var customizetextPosition  =$('#customizetextPosition').val();
        if(product_type==2|| product_type==3 ){
            var customizeColor=  $(this).attr('data-color');
            var texture=$('#texture').val ();
            var gradienttext=  $('#gradienttext').val();

            var product_image=  $('#product_image').val();
            var ref_img=  $('#ref_img').val();


            $('#img_loader').show();
            $.ajax({
                url: 'index.php?route=piyerSoft/cases/getimage',
                type: 'post',
                data: { gradienttext : gradienttext,texture:texture,product_type:product_type,customizeColor:customizeColor,product_image:product_image,ref_img:ref_img },
                dataType: 'json',
                success: function(json) {
                    // $('#pimage, #trimImage').attr('src','');
                    $('#pimage, #trimImage').attr('src',json['src']);
                    $('#ref_img').val(json['ref']);
                    $('#img_loader').hide();
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    $('#img_loader').hide();
                    alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                }
            });

        }else if(product_type==4 && customizetextPosition=='Vertical'){
            $('#img_loader').show();
            var customizetext=  $('#customizetext').val();
            var customizeFont=  $('#customizeFont').val();
            var ref_img=  $('#ref_img').val();
            var customizeColor=  $(this).attr('data-color');
            var product_id = $('[name="product_id"]').val ();
            var model = $('[name="model"]').val ();

            var pattern_mask=  $('#pattern_mask').val();
            $.ajax({
                url: 'index.php?route=piyerSoft/cases/getverticaltextimage',
                type: 'post',
                data: { customizetext : customizetext,customizeFont:customizeFont,customizeColor:customizeColor,product_mask:pattern_mask,ref_img:ref_img, product_id: product_id, model: model },
                dataType: 'json',
                success: function(json) {
                    // $('#pimage, #trimImage').attr('src','');
                    $('.Second_Layer').attr('src',json['src']);
                    $('#ref_img').val(json['ref']);
                    $('#img_loader').hide();
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    $('#img_loader').hide();
                    alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                }
            });
        }else if(product_type==4 && customizetextPosition=='VerticalRight'){
            $('#img_loader').show();
            var customizetext=  $('#customizetext').val();
            var customizeFont=  $('#customizeFont').val();
            var ref_img=  $('#ref_img').val();
            var customizeColor=  $(this).attr('data-color');
            var product_id = $('[name="product_id"]').val ();
            var model = $('[name="model"]').val ();

            var pattern_mask=  $('#pattern_mask').val();
            $.ajax({
                url: 'index.php?route=piyerSoft/cases/getverticalrighttextimage',
                type: 'post',
                data: { customizetext : customizetext,customizeFont:customizeFont,customizeColor:customizeColor,product_mask:pattern_mask,ref_img:ref_img, product_id: product_id, model: model },
                dataType: 'json',
                success: function(json) {
                    // $('#pimage, #trimImage').attr('src','');
                    $('.Second_Layer').attr('src',json['src']);
                    $('#ref_img').val(json['ref']);
                    $('#img_loader').hide();
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    $('#img_loader').hide();
                    alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                }
            });
        }
    });
    $('.PP__CustomizationTextPosition--Vertical').click (function () {
        var product_type=  $("input[name='product_type']").val();

        if(product_type==4){

            var customizetext=  $('#customizetext').val();
            var customizeFont=  $('#customizeFont').val();
            var ref_img=  $('#ref_img').val();
            var customizeColor=  $('#customizeColor').val();
            var pattern_mask=  $('#pattern_mask').val();
            var product_id = $('[name="product_id"]').val ();
            var model = $('[name="model"]').val ();
            $('#img_loader').show();

            $.ajax({
                url: 'index.php?route=piyerSoft/cases/getverticaltextimage',
                type: 'post',
                data: { customizetext : customizetext,customizeFont:customizeFont,customizeColor:customizeColor,product_mask:pattern_mask,ref_img:ref_img, product_id: product_id, model: model },
                dataType: 'json',
                success: function(json) {
                    // $('#pimage, #trimImage').attr('src','');
                    $('.Second_Layer').attr('src',json['src']);
                    $('#ref_img').val(json['ref']);
                    $('#img_loader').hide();
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    $('#img_loader').hide();
                    alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                }
            });
        }
    });
    $('.PP__CustomizationTextPosition--VerticalRight').click (function () {
        var product_type=  $("input[name='product_type']").val();
        if(product_type==4){
//            $('#CustomizationText').hide();
            var customizetext=  $('#customizetext').val();
            var customizeFont=  $('#customizeFont').val();
            var ref_img=  $('#ref_img').val();
            var customizeColor=  $('#customizeColor').val();
            var pattern_mask=  $('#pattern_mask').val();
            var product_id = $('[name="product_id"]').val ();
            var model = $('[name="model"]').val ();
            $('#img_loader').show();
            var id=this.id;
            $.ajax({
                url: 'index.php?route=piyerSoft/cases/getverticalrighttextimage',
                type: 'post',
                data: { customizetext : customizetext,customizeFont:customizeFont,customizeColor:customizeColor,product_mask:pattern_mask,ref_img:ref_img, product_id: product_id, model: model },
                dataType: 'json',
                success: function(json) {
                    // $('#pimage, #trimImage').attr('src','');
                    $('.Second_Layer').attr('src',json['src']);
                    $('#ref_img').val(json['ref']);
                    $('#img_loader').hide();
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    $('#img_loader').hide();
                    alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                }
            });
        }

    });

    $('.PP__CustomizationTextFont').click (function () {
        var product_type=  $("input[name='product_type']").val();
        var customizetextPosition=  $("#customizetextPosition").val();
        if(product_type==4 && customizetextPosition== 'Vertical'){

            var customizetext=  $('#customizetext').val();
            var customizeFont=  $(this).attr('data-font');
            var ref_img=  $('#ref_img').val();
            var customizeColor=  $('#customizeColor').val();
            var pattern_mask=  $('#pattern_mask').val();
            var product_id = $('[name="product_id"]').val ();
            var model = $('[name="model"]').val ();

            $('#img_loader').show();
            $.ajax({
                url: 'index.php?route=piyerSoft/cases/getverticaltextimage',
                type: 'post',
                data: { customizetext : customizetext,customizeFont:customizeFont,customizeColor:customizeColor,product_mask:pattern_mask,ref_img:ref_img, product_id: product_id, model: model },
                dataType: 'json',
                success: function(json) {
                    // $('#pimage, #trimImage').attr('src','');
                    $('.Second_Layer').attr('src',json['src']);
                    $('#ref_img').val(json['ref']);
                    $('#img_loader').hide();
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    $('#img_loader').hide();
                    alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                }
            });
        }
        if(product_type==4 && customizetextPosition== 'VerticalRight'){

            var customizetext=  $('#customizetext').val();
            var customizeFont=  $(this).attr('data-font');
            var ref_img=  $('#ref_img').val();
            var customizeColor=  $('#customizeColor').val();
            var pattern_mask=  $('#pattern_mask').val();
            var product_id = $('[name="product_id"]').val ();
            var model = $('[name="model"]').val ();

            $('#img_loader').show();
            $.ajax({
                url: 'index.php?route=piyerSoft/cases/getverticalrighttextimage',
                type: 'post',
                data: { customizetext : customizetext,customizeFont:customizeFont,customizeColor:customizeColor,product_mask:pattern_mask,ref_img:ref_img, product_id: product_id, model: model },
                dataType: 'json',
                success: function(json) {
                    // $('#pimage, #trimImage').attr('src','');
                    $('.Second_Layer').attr('src',json['src']);
                    $('#ref_img').val(json['ref']);
                    $('#img_loader').hide();
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    $('#img_loader').hide();
                    alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                }
            });
        }
    });

    $('.texture').on('click', function () {
        var filename=$(this).attr('src').substring($(this).attr('src').lastIndexOf('/')+1);
        $('#texture').val(filename);


    });
</script>
<script>
    function getcanvasimage(id,ButtonID,msg){

        var temp=$('#CustomizationText').siblings ('#canvas_media').html();
        if(!$('#CustomizationText').siblings ("#canvas_media").children ("#pimage").length){
            $('#CustomizationText').siblings ('#canvas_media').html('');
            var img=  '<img src="'+ $('#product_image').val() +'" width="500" />';
            $('#CustomizationText').siblings ('#canvas_media').html(img);
        }

        $('.custom-0008.d-none #img_canvas').removeAttr ('id');
        if ($('#img_canvas').find ('video').length) $('#img_canvas').find ('#pimage').attr ('src', $('#trimImage').attr ('src'));
        if ($(window).width () <= 768)
        {
            $('#canvas_media img, .Second_Layer, .thumbnails video, .PP__Image, .pimageWITHvideo, #CustomizationText, #CustomizationText--Second').addClass ('_wah-500');
            window ['multiple'] = 1;
            $('.PP__CustomizationTextInput').trigger ('keyup');
        }

        html2canvas(document.getElementById("img_canvas"), {
            onrendered: function (canvas) {
                canvas.className = "html2canvas";
                var image = canvas.toDataURL("image/jpeg",0.7);

                if ($(window).width() <= 768)
                {
                    $('#canvas_media img, .Second_Layer, .thumbnails video, .PP__Image, .pimageWITHvideo, #CustomizationText, #CustomizationText--Second').removeClass ('_wah-500');
                    window ['multiple'] = 1.25;
                    $('.PP__CustomizationTextInput').trigger ('keyup');
                }
                $('#CustomizationText').siblings('#canvas_media').html('');
                $('#CustomizationText').siblings('#canvas_media').html(temp);
                $('.custom-0008.d-none #img_canvas').attr('id', 'img_canvas');
                var img = new Image();
                var ctx = canvas.getContext("2d");
                canvas.width = 100;

                img.onload = function () {
                    canvas.height = canvas.width * (img.height / img.width);
                    var oc = document.createElement('canvas'),
                        octx = oc.getContext('2d');

                    oc.width = img.width * 0.5;
                    oc.height = img.height * 0.5;
                    octx.drawImage(img, 0, 0, oc.width, oc.height);

                    octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);

                    ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
                        0, 0, canvas.width, canvas.height);

                    var CaptureImage = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, "");

                    if(CaptureImage!=''){
                        $.ajax({
                            url: 'index.php?route=piyerSoft/cases/saveCanvasImage',
                            type: 'post',
                            data: {cart_id: id, canvas_img: CaptureImage},
                            dataType: 'json',
                            success: function (json) {
                                if (ButtonID == "button-checkout") window.location.href = '/odeme';
                                $('#button-cart').button('reset');
                                $('#img_loader').hide();

                                new Noty ({
                                    theme: 'mint',
                                    type: 'success',
                                    layout: 'bottomCenter',
                                    text: msg,
                                    timeout: 5000,
                                    closeWith: ['button'],
                                    animation: {
                                        open : 'animated fadeInUp',
                                        close: 'animated fadeOutDown'
                                    },
                                    callbacks: {
                                        onTemplate: function() {
                                            this.barDom.innerHTML = '<div class="noty_body" style="background-color: #AC6E82;">' + '<i class="fa fa-check-circle" aria-hidden="true"></i> Ürününüz Sepete Eklenmiştir' + '<div>';
                                        }
                                    }
                                }).show ()
                            },

                        });
                    }else{
                        getcanvasimage(id,ButtonID,msg);
                    }

                }
                img.src = image;

            },
            useCORS: true
        });

    }
</script>
<script>
    $('#button-cart, #button-checkout').on('click', function () {
        let _item_id = window.dataLayer[datalayerItemIndex-1].ecommerce.items[0].item_id;
        let _item_name = window.dataLayer[datalayerItemIndex-1].ecommerce.items[0].item_name;
        let _item_variant = window.dataLayer[datalayerItemIndex-1].ecommerce.items[0].item_variant;
        let _item_category = window.dataLayer[datalayerItemIndex-1].ecommerce.items[0].item_category;
        dataLayerItemPush('add_to_cart', [{
            'item_name': _item_name,
            'item_id': _item_id,
            'price': '<?=strtr($price, [","=>".", "₺"=>""])?>',
            'item_brand': '<?=$breadcrumbs[1]["text"]?>',
            'item_category': _item_category,
            'item_variant': _item_variant,
            'item_list_name': '<?=$breadcrumbs[3]["text"]?>',
            'quantity': 1,
            'index': 1
        }]);
        var ButtonID = $(this).attr ('id');
        var product_type=  $("input[name='product_type']").val();
        if(product_type==7 || product_type==9){
            addcustomimage(ButtonID);
        }else{
            var continueAddToCart = function () {

                $('.thumbnails > .owl-carousel').trigger ('to.owl', [0, 0]);

                $('#img_loader').show();


                $.ajax({
                    url: 'index.php?route=checkout/cart/add',
                    type: 'post',
                    async: false,
                    data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product textarea,#customizetext'+(product_type==6?',#customizetext2':'')+',#customizetext2,#customizeColor,#customizeFont,#customizetextPosition,#gradienttext,#texture, #product-form input[type=\'checkbox\']:checked'),
                    dataType: 'json',
                    beforeSend: function () {
                        $('#button-cart').button('loading');
                    },
                    // complete: function () {
                    // $('#button-cart').button('reset');
                    //  $('#img_loader').hide();
                    // },
                    success: function (response) {

                        if (response.text_items_only) $('#cart-total').text(response.text_items_only);

                        /* - GEÇİCİ - */
                        setTimeout (function () {
                            let notyMessage = '';
                            switch (response.text_items_only)
                            {
                                case 1:
                                    notyMessage = 'Şimdi Sepetine 2 Ürün Daha Ekle 1 Tanesi Hediyemiz Olsun :)';
                                    break;
                                case 2:
                                    notyMessage = 'Hediyeni Unutma! Şimdi Sepetine 3. Ürünü Ekle 1 Tanesi Ücretsiz Olsun :)';
                                    break;
                                case 3:
                                    notyMessage = 'Sepetinde 1 Ürünü Hediye Olarak Ayarladım :)';
                                    break;
                            }
                            if (response.text_items_only <= 3)
                            {
                                new Noty ({
                                    theme: 'mint',
                                    type: 'success',
                                    layout: 'bottomCenter',
                                    text: notyMessage,
                                    timeout: 5000,
                                    closeWith: ['button'],
                                    animation: {
                                        open : 'animated fadeInUp',
                                        close: 'animated fadeOutDown'
                                    },
                                    callbacks: {
                                        onTemplate: function() {
                                            this.barDom.innerHTML = '<div class="noty_body" style="background-color: #AC6E82;">' + this.options.text + '<div>';
                                        }
                                    }
                                }).show ()
                            }
                        }, 1500);
                        /* - GEÇİCİ - */

                        if (response.success) {
                            getcanvasimage(response.cart_id,ButtonID,response.success);

                        } else
                        {
                            $('#button-cart').button('reset');
                            $('#img_loader').hide();
                            for (e in response.error.option)
                                new Noty ({
                                    theme: 'mint',
                                    type: 'success',
                                    layout: 'bottomCenter',
                                    text: response.error.option [e],
                                    timeout: 5000,
                                    closeWith: ['button'],
                                    animation: {
                                        open : 'animated fadeInUp',
                                        close: 'animated fadeOutDown'
                                    },
                                    callbacks: {
                                        onTemplate: function() {
                                            this.barDom.innerHTML = '<div class="noty_body" style="background-color: #AC6E82;">' + this.options.text + '<div>';
                                        }
                                    }
                                }).show ()
                        }

                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                    }
                });


            };
            if ($('.tgl:checked').length)
            {
                var tglCount = 0;
                $('.tgl:checked').each (function (Index, Item) {
                    var Element = $(this);
                    var ProductID = $(this).attr ('data-productid');
                    $.ajax ({
                        url: 'index.php?route=checkout/cart/add',
                        data: {product_id: ProductID},
                        dataType: 'JSON',
                        type: 'POST',
                        success: function (jSON) {
                            tglCount++;
                            Element.val (jSON.cart_id);

                            if ($('.tgl:checked').length == tglCount) continueAddToCart ();
                        }
                    });
                });
            }
            else continueAddToCart ();
        }
    });
</script>

<script>

    jQuery (function ($) {

        var ProductID = $('input[name="product_id"]').val ();

        $.ajax ({
            url: 'index.php?route=product/product/getProductInfo',
            data: { product_id : ProductID },
            dataType: 'json',
            type: 'POST',
            success: function (jSON) {

                jSON ['all_categories'].forEach (function (Item, Index) {
                    $('#all_categories').append (
                        '<option '+ (Item.category_id == jSON ['category_id']? 'selected="selected"': '') + ' value="' + Item.category_id + '">' + Item.name.replace ('Telefon Kılıfı', '') +'</option>'
                    );

                    if (Index == (jSON ['all_categories'].length - 1)) {
                        var CategoryID =  $('#all_categories option:selected').val ();

                        $.ajax ({
                            url: 'index.php?route=product/product/getExistCollectionSubCategories',
                            data: {category_id : CategoryID, product_id : ProductID},
                            dataType: 'json',
                            type: 'POST',
                            success: function (jSON2) {
                                jSON2 ['categories'].forEach (function (Item, Index) {
                                    $('#sub_categories').append (
                                        '<option value="'+ Item.category_id +'">'+ Item.name.replace ('Telefon Kılıfı', '') + '</option>'
                                    );

                                    if (Index == (jSON2 ['categories'].length - 1))
                                    {
                                        $('#sub_categories > option').each (function (Index, Item) {
                                            if ($(Item).val () == jSON ['sub_category_id']) $(Item).attr ('selected', 'selected');

                                            if (Index == ($('#sub_categories > option').length - 1))
                                            {
                                                $("#sub_categories").trigger ("change");

                                                $('*[attribute-data="'+ jSON ['collection_attr_id'] +'"]').trigger ('click');
                                                setTimeout (function () {
                                                    $('*[color-attribute-data="'+ jSON ['color_attr_id'] +'"]').trigger ('click');
                                                }, 250);

                                                $('.bLoading, #loading').toggleClass ('d-none');
                                            }
                                        });
                                    }
                                });
                            }
                        });
                    }
                });

            }
        });

    });

</script>

<script>
    jQuery (function ($) {
        $('#all_categories').on ('change', function () {
            var CategoryID =  $('#all_categories option:selected').val ();
            var ProductID = $('input[name="product_id"]').val ();

            $.ajax ({
                url: 'index.php?route=product/product/getExistCollectionSubCategories',
                data: {category_id : CategoryID, product_id : ProductID},
                dataType: 'json',
                type: 'POST',
                success: function (jSON2) {
                    $('#sub_categories').empty ();

                    jSON2 ['categories'].forEach (function (Item, Index) {
                        $('#sub_categories').append (
                            '<option value="'+ Item.category_id +'">'+ Item.name.replace ('Telefon Kılıfı', '') + '</option>'
                        );

                        if (Index == (jSON2 ['categories'].length - 1))
                        {
                            $('#sub_categories > option').each (function (Index, Item) {
                                if ($(Item).val () == jSON2 ['sub_category_id']) $(Item).attr ('selected', 'selected');

                                if (Index == ($('#sub_categories > option').length - 1))
                                {
                                    $("#sub_categories").val ($("#sub_categories > option").first ().val ()).change ();

                                    $('*[attribute-data="'+ jSON2 ['collection_attr_id'] +'"]').trigger ('click');
                                    setTimeout (function () {
                                        $('*[color-attribute-data="'+ jSON2 ['color_attr_id'] +'"]').trigger ('click');
                                    }, 250);
                                }
                            });
                        }
                    });
                }
            });
        });
    });
</script>
<?php
if($useinsider_status)
{
?>
<script async src="//deercase.api.useinsider.com/ins.js?id=<?=$useinsider_partner_id?>"></script>
<?php
}
?>
<script>


    $(() => {
        //Alt kategorileri çekiyoruz

        $('#sub_categories').on('change', () => {
            $('.bLoading, #loading').toggleClass ('d-none');
            $('#button-cart, #button-checkout').addClass ('disabled');

            let category_id =  $('#sub_categories option:selected').val();
            let product_id = $('input[name=\'product_id\']').val();
            let model = $('input[name=\'model\']').val();
            $('#attribute_cases').html('');
            $('#attribute_color_cases').html('');

            $.ajax({
                url: 'index.php?route=product/product/getAttributes',
                dataType: 'json',
                type: 'POST',
                data: { category_id : category_id, product_id : product_id, model : model },
                success: function(json){
                    if(json['attributes'] && json['attributes'].length){
                        $('.PP__OptionTitle').show ();
                        $('.PP__OptionTitle.Disabled').hide ();

                        let html = '';
                        json['attributes'].forEach((item) =>{
                            html += '<div class="col-xs-6 PP__Case"><a style="font-size:9px; font-weight: 600;" onClick="getColorAttribute('+ item.attribute_id +')" class="PP__Case_a" attribute-data="'+ item.attribute_id +'"><img src="'+ item.image +'" /> '+ item.name + '</a></div>';
                        });
                        $('#attribute_cases').html(html);
                        prev = $("input[name='pre_case_attrib']").val();
                        if (prev !== ""){
                            b = $('a[attribute-data="'+prev+'"]');
                            console.log(b);
                            if (b.length == 0){
                                //call default one
                                console.log("tdef1");
                                $('#attribute_cases').find ('.PP__Case').first().children('a').trigger ('click');
                            }else{
                                b.trigger('click');
                            }
                        }else{
                            console.log("def1");
                            $('#attribute_cases').find ('.PP__Case').first().children('a').trigger ('click');
                        }

                        $('.bLoading, #loading').toggleClass ('d-none');
                    }

                    else {
                        $('.PP__OptionTitle').hide ();
                        $('.PP__OptionTitle.Disabled').show ();

                        /* - */
                        <? if (strpos ($model, 'lms') != -1 && $product_type == 1): ?>
                        $('#sub_categories option:selected').next ().attr ('selected', 'selected');
                        $('#sub_categories').change ();
                        <? endif; ?>
                        /* - */

                        $('.bLoading, #loading').toggleClass ('d-none');
                    }

                }
            });
        });

    });

    function getColorAttribute(attribute_id,from_attrib = 0) {
        $('#button-cart, #button-checkout').addClass ('disabled');

        $('.PP__Case--Active').removeClass ('PP__Case--Active');
        $('.PP__Case_a[attribute-data="' + attribute_id + '"]').parent ().addClass ('PP__Case--Active');

        const category_id =  $('#sub_categories option:selected').val();
        let product_id = $('input[name=\'product_id\']').val();
        let model = $('input[name=\'model\']').val();
        $('#attribute_color_cases').html('');
        $('#canvas_media').html('');
        $('.image-additional .thumbnail img').attr('src','');
        $.ajax({
            url: 'index.php?route=product/product/getAttributesByOtherAttributeId',
            dataType: 'json',
            type: 'POST',
            data: { category_id : category_id, attribute_id : attribute_id, product_id : product_id, model : model},
            success: function(json){
                if (from_attrib == 0)
                    $("input[name='pre_case_attrib']").val(attribute_id);
                if(json['attributes']){
                    $('#attribute_color_cases').prev ('.PP__OptionTitle').show ();

                    pid = 0;
                    let html = '';
                    json['attributes'].forEach((item) =>{
                        pid = item.product_id;
                        html += '<div class="PP__CaseCircle' + ((product_id == pid)? ' PP__CaseCircle--Active': '') + '" product-data="'+ item.product_id +'"><a onClick="cliclColorAttribute('+ item.attribute_id +', '+ item.product_id +')" color-attribute-data="'+ item.attribute_id +'"><img src="'+ item.image +'" /></a></div>';
                    });
                    $('#attribute_color_cases').html(html);
                    prev = $("input[name='pre_attrib']").val();
                    if (prev !== ""){
                        b = $('a[color-attribute-data="'+prev+'"]');
                        console.log(b);
                        if (b.length == 0){
                            //call default one
                            console.log("tdef");
                            $('#attribute_color_cases').find ('.PP__CaseCircle').first().children('a').trigger ('click');
                        }else{
                            b.trigger('click');
                        }
                    }else{
                        console.log("def");
                        $('#attribute_color_cases').find ('.PP__CaseCircle').first().children('a').trigger ('click');
                    }
                    $('#customizetext').keyup ();
                }

            }
        });
    }

    function getFacebookPixelCode(facebook_js) {

        var s = document.createElement("script");
        s.type = "text/javascript";

        s.text = facebook_js;
        $("head").append(s);

        // facebook_loadScript();

    }

    function cliclColorAttribute(attribute_id, product_id,from_attrib = 0) {

        $("html, body").animate({ scrollTop: 0 }, "slow");
        $('#button-cart, #button-checkout').addClass ('disabled');

        $('.PP__CaseCircle--Active').removeClass ('PP__CaseCircle--Active');
        $('[color-attribute-data="' + attribute_id + '"]').parent ().addClass ('PP__CaseCircle--Active')

        $.ajax({
            url: 'index.php?route=product/product/getProductDetail&product_id=' + product_id,
            dataType: 'json',
            type: 'POST',
            data: { attribute_id : attribute_id, product_id : product_id, href: encodeURI (window.location.href) },
            success: function(json) {

                /* - */
                if
                (
                    (json.product_info.model.indexOf ('lms') != -1) &&
                    (json.product_info.manufacturer != null)&&
                    (json.product_info.manufacturer != '<?= $manufacturer; ?>') &&
                    (json.product_info.product_type == '1')
                ) {
                    window.location.href = json.product_info.href;
                }
                /* - */
                $('.ajaxview').html('');
                $('.ajaxview').html(json['tempdata']);
                if(json['options']!='')
                    $('#options').html(json['options']);

                $('.PP__CustomizationTextInput').trigger ('keyup');
                $('.PP__Title').html(json['product_info']['name']);
                $('#fbProductID').val(product_id);

                $('title').text (json.product_info.meta_title);

                getFacebookPixelCode(json['facebook_js']);


                // ---------------------------------------------------------------------------------------------------
                $('#all_categories').html('');
                json ['all_categories'].forEach (function (Item, Index) {
                    $('#all_categories').append (
                        '<option '+ (Item.category_id == json ['category_id'] ? 'selected="selected"' : '') + ' value="' + Item.category_id + '">' + Item.name.replace ('Telefon Kılıfı', '') +'</option>'
                    );
                });

                $('#sub_categories').html('');
                json ['all_sub_categories'].forEach (function (Item, Index) {
                    $('#sub_categories').append (
                        '<option '+ (Item.category_id == json ['sub_category_id'] ? 'selected="selected"' : '') + ' value="' + Item.category_id + '">' + Item.name.replace ('Telefon Kılıfı', '') +'</option>'
                    );
                });
                // ---------------------------------------------------------------------------------------------------

                $('.PP__Price').html((json['product_info']['special'])? json['product_info']['special']: json['product_info']['price']);
                if (json['product_info']['special']) $('.PP__Price').siblings ('span').html(json['product_info']['price']);

                //    $('#gradienttext').val('');

                if(json['product_info']['product_type']=='2' || json['product_info']['product_type']=='3'){
                    $('.gradient').show();
                    $('.PP__CustomizationTextPositions').hide();
                }else{

                    $('.gradient').hide();
                    $('.PP__CustomizationTextPositions').show();
                }

                let html = '';
                if(json['product_info']['media_extension'] == 'video'){
                    if (json['product_info']['media'])
                    {
                        html += '<video playsinline="" autoplay="autoplay" loop="loop" muted="muted">';
                        html += '<source src="'+ json['product_info']['media'] +'.webm" type="video/webm; codecs=vp9,vorbis">';
                        html += '<source src="'+ json['product_info']['media'] +'.mp4" type="video/mp4">';
                        html += '</video>';
                    }
                    if (json['product_info']['mask']) html += '<img id="pimage" src="'+ json['product_info']['mask'] +'" width="500" class="pimageWITHvideo" />';
                }else{
                    html += '<img id="pimage" src="'+ json['product_info']['media'] +'" width="500" />';
                   // console.log(json['product_info']['media'], "####");
                }
                $('#trimImage').attr ('src', json['product_info']['image']);

                if (json ['product_info']['thumb'].match (/(SEFFAF_SAYDAM-SILVER|SEFFAF_SAYDAM-BLACK)/)){
                    $('.fImage__BLACK--Carousel #img_canvas #canvas_media').html(html);
                    $('#product_image, #product_image--BLACK').val(json['product_info']['product_image']);
                } else {
                    $('#img_canvas #canvas_media').html(html);
                    $('#product_image').val(json['product_info']['product_image']);
                }
                if($('#gradienttext').val()!='' && (json['product_info']['product_type']=='2' || json['product_info']['product_type']=='3')){
                    var customizeColor=  $('#customizeColor').val();
                    var  texture=	 $('#texture').val ();
                    var gradienttext=  $('#gradienttext').val();
                    var product_image=  json['product_info']['product_image'];
                    var ref_img=  $('#ref_img').val();
                    var product_type=  json['product_info']['product_type'];
                    $.ajax({
                        url: 'index.php?route=piyerSoft/cases/getimage',
                        type: 'post',
                        data: { gradienttext : gradienttext,texture:texture,product_type:product_type,customizeColor:customizeColor,product_image:product_image,ref_img:ref_img },
                        dataType: 'json',
                        success: function(json) {
                            $('#pimage, #trimImage').attr('src',json['src']);
                            $('#ref_img').val(json['ref']);
                        }
                    });
                }
                $('#pattern_url').val(json['product_info']['pattern']);
                $('#pattern_mask').val(json['product_info']['mask']);
                if(json['product_info']['pattern']!='')
                    $('#img_canvas').find('img').last().attr('src', json['product_info']['pattern']);

                $("input[name='product_id']").val(product_id);
                $("input[name='product_type']").val(json['product_info']['product_type']);
                $("input[name='model']").val(json['product_info']['model']);
                if (from_attrib == 0)
                    $("input[name='pre_attrib']").val(attribute_id);

                window.history.replaceState(null, null, json['product_info']['href'].replace (/amp;/g, '&'));
                setTimeout (function () {
                    AdvancedSharing ();
                    var intervalAdvancedSharing = setInterval (function () {
                        if (trimCanvas ().width != 999) $('[name="customizetext"]').trigger ('keyup');
                    }, 100);
                }, 500);

                $('.thumbnails .image-additional').eq (0).find ('img').attr ('src', json['product_info']['thumb']);
                $('.thumbnails .image-additional').eq (0).find ('img').attr ('data-src', json['product_info']['popup']);
                $('.thumbnails .image-additional').not (':first').remove ();

                if (json.product_info.product_type == 5)
                    $('.thumbnails .owl-carousel .ThumbBox').each (function (EachIndex) {
                        $('.thumbnails .owl-carousel').owlCarousel ('remove', (EachIndex + 1)).owlCarousel ('refresh');
                    });

                var __fImageBlackCarouselIndex = 1, __fImageSilverCarouselIndex = 0;

                var counter=0;

                json ['product_info']['images'].forEach (function (Item, Index) {
                    if (Item.thumb.match (/(SEFFAF_SAYDAM-SILVER|SEFFAF_SAYDAM-BLACK)/))
                    {
                        if (Item.thumb.match (/(SEFFAF_SAYDAM-SILVER|SEFFAF_SAYDAM-BLACK)/)[0] == "SEFFAF_SAYDAM-BLACK")
                        {
                            $('.thumbnails').append (
                                '<li class="fImage__BLACK image-additional hidden-xs">' +
                                '<a class="thumbnail border-0" href="javascript: $(\'.thumbnails > .owl-carousel.fImage__BLACK--Carousel\').trigger (\'to.owl\', [' + (__fImageBlackCarouselIndex++) + ', 300]);">' +
                                '<img src="' + Item.thumb + '" data-src="' + Item.popup + '">' +
                                '</a>' +
                                '</li>'
                            );

                            $('.thumbnails .owl-carousel.fImage__BLACK--Carousel').owlCarousel ('add', (
                                '<div class="ThumbBox mr-20">' +
                                '<img class="PP__Image w-100" src="' + Item.popup + '">' +
                                '</div>'
                            )).owlCarousel ('refresh');

                            $('.thumbnails .owl-carousel.fImage__BLACK--Carousel .ThumbBox').each (function (EachIndex) {
                                if (EachIndex != 0)
                                    $('.thumbnails .owl-carousel.fImage__BLACK--Carousel').owlCarousel ('remove', EachIndex).owlCarousel ('refresh');
                            });
                        }

                        else if (Item.thumb.match (/(SEFFAF_SAYDAM-SILVER|SEFFAF_SAYDAM-BLACK)/)[0] == "SEFFAF_SAYDAM-SILVER")
                        {
                            $('.thumbnails').append (
                                '<li class="fImage__SILVER image-additional hidden-xs">' +
                                '<a class="thumbnail border-0" href="javascript: $(\'.thumbnails > .owl-carousel.fImage__SILVER--Carousel\').trigger (\'to.owl\', [' + (__fImageSilverCarouselIndex) + ', 300]);">' +
                                '<img src="' + Item.thumb + '" data-src="' + Item.popup + '">' +
                                '</a>' +
                                '</li>'
                            );

                            if (__fImageSilverCarouselIndex != 0)
                            {
                                $('.thumbnails .owl-carousel.fImage__SILVER--Carousel').owlCarousel ('add', (
                                    '<div class="ThumbBox mr-20">' +
                                    '<img class="PP__Image w-100" src="' + Item.popup + '">' +
                                    '</div>'
                                )).owlCarousel ('refresh');
                            }

                            else
                            {
                                $('.fImage__SILVER--Carousel #img_canvas #canvas_media').html (
                                    '<img id="pimage" src="' + Item.popup + '" width="500" />'
                                );

                                $('#product_image--SILVER').val(Item.no_cache_image);
                            }

                            $('.thumbnails .owl-carousel.fImage__SILVER--Carousel .ThumbBox').each (function (EachIndex) {
                                if (EachIndex != 0)
                                    $('.thumbnails .owl-carousel.fImage__SILVER--Carousel').owlCarousel ('remove', EachIndex).owlCarousel ('refresh');
                            });

                            __fImageSilverCarouselIndex++;
                        }
                    }

                    else
                    {
                        if (json.product_info.product_type != 5)

                            if(counter==0){
                                $('.thumbnails .owl-carousel .ThumbBox').each (function (EachIndex) {
                                    if (EachIndex == 0)
                                        $('.thumbnails .owl-carousel').owlCarousel ('remove', (EachIndex+1)).owlCarousel ('refresh');
                                    else
                                        $('.thumbnails .owl-carousel').owlCarousel ('remove', (EachIndex)).owlCarousel ('refresh');
                                });
                                counter++;
                            }
                        $('.thumbnails').append (
                            '<li class="image-additional hidden-xs">' +
                            '<a class="thumbnail border-0" href="javascript: $(\'.thumbnails > .owl-carousel\').trigger (\'to.owl\', [' + (Index + 1) + ', 300]);">' +
                            '<img src="' + Item.thumb + '" data-src="' + Item.popup + '">' +
                            '</a>' +
                            '</li>'
                        );

                        var img_html = '<div class="ThumbBox mr-20">';
                        if(Item.is_gif == 'gif'){
                            img_html += '<img class="PP__Image w-100" src="' + Item.no_cache_image + '">';
                        }else {
                            img_html += '<img class="PP__Image w-100" src="' + Item.popup + '">';
                        }
                        img_html += '</div>';
                        $('.thumbnails .owl-carousel').owlCarousel ('add', img_html).owlCarousel ('refresh');


                    }
                });

                $('.tab-content').load (window.location.href + " .tab-content > *");
                $('.nav.nav-tabs > li').removeClass ('active');
                $('.nav.nav-tabs > li').eq (0).addClass ('active');

                if ($('#customizetextPosition').val () == 'Vertical') $('.PP__CustomizationTextPosition--Vertical').click ();

                $('.fImage__SILVER').hide ();

                if (0 < parseInt (json ['product_info']['quantity']))
                {
                    if(product_type!='7')
                        $('#button-cart, #button-checkout').removeClass ('disabled d-none');
                    $('#button-nostock').addClass ('d-none');
                }

                else
                {
                    $('#button-cart, #button-checkout').addClass ('d-none');
                    $('#button-nostock').removeClass ('d-none');
                }
                <?php
                if($useinsider_status)
                {
                        ?>
                    window.insider_object = {
                        "page": {
                            "type": "Product"
                        }
                    }
                    window.insider_object = {
                        "product": {
                            "id": json['product_info']['product_id'],
                            "name": json['product_info']['name'],
                            "taxonomy": [
                                json['breadcrumb1'],
                                json['breadcrumb2'],
                                json['breadcrumb3']
                            ],
                            "currency": json['product_info']['currency'],
                            "unit_price": (json['product_info']['price'].replace('₺','')).replace(',','.'),
                            "unit_sale_price": (json['product_info']['special']?(json['product_info']['special'].replace('₺','')).replace(',','.'):(json['product_info']['price'].replace('₺','')).replace(',','.')),
                            "url": json['product_info']['href'],
                            "stock": json['product_info']['stock'],
                            "color":json['product_info']['attribute_groups'][1]['attribute'][0]['name'],
                            "product_image_url": json['product_info']['image'],
                            "custom": {
                                "model": json['product_info']['model'],
                                "collection": json['product_info']['attribute_groups'][0]['attribute'][0]['name']
                            }
                        }
                    }
                    <?php
                }
                    ?>
                if ((datalayerItemIndex==0 && isLoading) || !isLoading) {
                    console.log('datalayer push ***');
                    dataLayerItemPush('view_item', [{
                        'item_name': json.product_info.name,
                        'item_id': json.product_info.product_id,
                        'price': '<?=strtr($price, [","=>".", "₺"=>""])?>',
                        'item_brand': json.breadcrumb1,
                        'item_category': 'Anasayfa / '+json.breadcrumb1+' / '+json.breadcrumb2+' / '+json.breadcrumb3+' / '+json.product_info.name,
                        'item_variant': json.product_info.attribute_groups[1].attribute[0].name,
                        'item_list_name': json.breadcrumb3,
                        'index': 1
                    }]);
                    datalayerItemIndex = window.dataLayer.length;
                }
            }
        });
    }

</script>
<script type="text/javascript"><!--
    $('select[name=\'recurring_id\'], input[name="quantity"]').change(function(){
        $.ajax({
            url: 'index.php?route=product/product/getRecurringDescription',
            type: 'post',
            data: $('input[name=\'product_id\'], input[name=\'quantity\'], select[name=\'recurring_id\']'),
            dataType: 'json',
            beforeSend: function() {
                $('#recurring-description').html('');
            },
            success: function(json) {
                $('.alert, .text-danger').remove();

                if (json['success']) {
                    $('#recurring-description').html(json['success']);
                }
            }
        });
    });
    //--></script>

<script type="text/javascript"><!--
    $('#button-cart_bk').on('click', function() {
        $.ajax({
            url: 'index.php?route=checkout/cart/add',
            type: 'post',
            data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product textarea'),
            dataType: 'json',
            beforeSend: function() {
                $('#button-cart').button('loading');
            },
            complete: function() {
                $('#button-cart').button('reset');
            },
            success: function(json) {
                $('.alert, .text-danger').remove();
                $('.form-group').removeClass('has-error');

                if (json['error']) {
                    if (json['error']['option']) {
                        for (i in json['error']['option']) {
                            var element = $('#input-option' + i.replace('_', '-'));

                            if (element.parent().hasClass('input-group')) {
                                element.parent().after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
                            } else {
                                element.after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
                            }
                        }
                    }

                    if (json['error']['recurring']) {
                        $('select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>');
                    }

                    // Highlight any found errors
                    $('.text-danger').parent().addClass('has-error');
                }

                if (json['success']) {
                    $('.breadcrumb').after('<div class="alert alert-success">' + json['success'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');

                    $('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');

                    $('html, body').animate({ scrollTop: 0 }, 'slow');

                    $('#cart > ul').load('index.php?route=common/cart/info ul li');
                }
            },
            error: function(xhr, ajaxOptions, thrownError) {
                alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            }
        });
    });
    //--></script>
<script type="text/javascript"><!--


    $('button[id^=\'button-upload\']').on('click', function() {
        var node = this;

        $('#form-upload').remove();

        $('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" /></form>');

        $('#form-upload input[name=\'file\']').trigger('click');

        if (typeof timer != 'undefined') {
            clearInterval(timer);
        }

        timer = setInterval(function() {
            if ($('#form-upload input[name=\'file\']').val() != '') {
                clearInterval(timer);

                $.ajax({
                    url: 'index.php?route=tool/upload',
                    type: 'post',
                    dataType: 'json',
                    data: new FormData($('#form-upload')[0]),
                    cache: false,
                    contentType: false,
                    processData: false,
                    beforeSend: function() {
                        $(node).button('loading');
                    },
                    complete: function() {
                        $(node).button('reset');
                    },
                    success: function(json) {
                        $('.text-danger').remove();

                        if (json['error']) {
                            $(node).parent().find('input').after('<div class="text-danger">' + json['error'] + '</div>');
                        }

                        if (json['success']) {
                            alert(json['success']);

                            $(node).parent().find('input').val(json['code']);
                        }
                    },
                    error: function(xhr, ajaxOptions, thrownError) {
                        alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                    }
                });
            }
        }, 500);
    });
    //--></script>
<script type="text/javascript"><!--
    $('#review').delegate('.pagination a', 'click', function(e) {
        e.preventDefault();

        $('#review').fadeOut('slow');

        $('#review').load(this.href);

        $('#review').fadeIn('slow');
    });

    /*$('#review').load('index.php?route=product/product/review&product_id=<?php echo $product_id; ?>');*/

    $('#button-review').on('click', function() {
        $.ajax({
            url: 'index.php?route=product/product/write&product_id=<?php echo $product_id; ?>',
            type: 'post',
            dataType: 'json',
            data: $("#form-review").serialize(),
            beforeSend: function() {
                $('#button-review').button('loading');
            },
            complete: function() {
                $('#button-review').button('reset');
            },
            success: function(json) {
                $('.alert-success, .alert-danger').remove();

                if (json['error']) {
                    $('#review').after('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + '</div>');
                }

                if (json['success']) {
                    $('#review').after('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + '</div>');

                    $('input[name=\'name\']').val('');
                    $('textarea[name=\'text\']').val('');
                    $('input[name=\'rating\']:checked').prop('checked', false);
                }
            }
        });
    });

    /*
    $(document).ready(function() {
        $('.thumbnails').magnificPopup({
            type:'image',
            delegate: 'a',
            gallery: {
                enabled:true
            }
        });
    }); */
    //--></script>
<!--
<?php if ($product_type == 4): ?>
  <script src="//scripts.piyersoft.com/javascript/jquery.sticky.js"></script>
  <script>
      $(document).ready (function () {
          if ($(window).width () <= 768)
              $(".thumbnails").sticky ({
                  topSpacing: 60,
                  bottomSpacing: 494,
                  zIndex: 999
              });
      });
  </script>
<?php endif; ?>
-->
<script>
    jQuery (function ($) {
        $(window).scrollTop (100).scrollTop (0);

        setTimeout (function () {
            $(window).scrollTop (100).scrollTop (0);
        }, 1000);
    });
</script>

<!-- sessionStorage: Begin -->
<script>
    /*jQuery (function ($) {
      var URL = '', Path = '', Params = '', PreParams = '';
      URL = window.location.href.split ('/') [window.location.href.split ('/').length - 1];

      Path = URL.split ('&') [0];
      var PreParams = URL.split ('&');
      PreParams.shift ();
      URL = '';
      PreParams.forEach (function (Item) {
        URL += Item + '&';
      });
      URL = URL.replace (/\&$/, '');
      Params = new URLSearchParams (URL), __Params = [];

      var Filter = {
        Toggle: function (Type, Value, Multiple) {
          if (Params.getAll (Type).toString ().indexOf (Value) == -1)
          {
            __Params = [];
            __Params.push (Value);
            if (Multiple)
              Params.getAll (Type).toString ().split (',').forEach (function (Item) {
                __Params.push (Item);
              });
            Params.set (Type, __Params);
          }
          else
          {
            if (Multiple)
            {
              __Params = [];
              Params.getAll (Type).toString ().split (',').forEach (function (Item) {
                if (Item != Value) __Params.push (Item);
              });
              Params.set (Type, __Params);
            }
          }

          window.location.href = (
            Path +
            (Params.getAll ('option').toString ()? ("&option=" + Params.getAll ('option').toString ()): '') +
            (Params.getAll ('attribute').toString ()? ("&attribute=" + Params.getAll ('attribute').toString ()): '') +
            (Params.getAll ('brand').toString ()? ("&brand=" + Params.getAll ('brand').toString ()): '') +
            (Params.getAll ('sort').toString ()? ("&sort=" + Params.getAll ('sort').toString ()): '')
          ).replace (/,&/g, '&').replace (/,$/g, '');
        }
      };

      if (sessionStorage.getItem ('customizetext')) $('#customizetext').val (sessionStorage.getItem ('customizetext'));
    });*/
</script>
<!-- sessionStorage: End -->

<img id="trimImage" class="d-none" src="<?= $no_cache_image; ?>" />
<!-- TrimCanvas -->
<script>
    function trimCanvas () {
        var c = document.createElement ('canvas');
        c.width = 1000;
        c.height = 1000;
        var ctx = c.getContext('2d');
        ctx.drawImage (document.getElementById ('trimImage'), 0, 0);
        var copy = document.createElement('canvas').getContext('2d'),
            pixels = ctx.getImageData(0, 0, c.width, c.height),
            l = pixels.data.length,
            i,
            bound = {
                top: null,
                left: null,
                right: null,
                bottom: null
            },
            x, y;

        for (i = 0; i < l; i += 4) {
            if (pixels.data[i] !== 255 && pixels.data[i + 1] !== 255 && pixels.data[i + 2] !== 255) {
                x = (i / 4) % c.width;
                y = ~~((i / 4) / c.width);

                if (bound.top === null) {
                    bound.top = y;
                }

                if (bound.left === null) {
                    bound.left = x;
                } else if (x < bound.left) {
                    bound.left = x;
                }

                if (bound.right === null) {
                    bound.right = x;
                } else if (bound.right < x) {
                    bound.right = x;
                }

                if (bound.bottom === null) {
                    bound.bottom = y;
                } else if (bound.bottom < y) {
                    bound.bottom = y;
                }
            }
        }

        var trimHeight = bound.bottom - bound.top,
            trimWidth = bound.right - bound.left,
            trimmed = ctx.getImageData(bound.left, bound.top, trimWidth, trimHeight);

        copy.canvas.width = trimWidth;
        copy.canvas.height = trimHeight;
        <? if ($product_type == 8): ?>
        copy.canvas.width /= 1.6;
        copy.canvas.height /= 1.6;
        <? endif; ?>
        copy.putImageData(trimmed, 0, 0);

        return copy.canvas;
    }
</script>
<!-- TrimCanvas -->

<?php
if($CretioOneTag_status)
{
?>
<!-- Criteo Product Tag -->
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
    window.criteo_q = window.criteo_q || [];
    var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
    window.criteo_q.push(
        { event: "setAccount", account: '<?php echo $CretioOneTag_id ?>'}, // You should never update this line
        { event: "setEmail", email: "" }, // Can be an empty string
        { event: "setSiteType", type: deviceType},
        { event: "viewItem", item: <?php echo $product_id?> });
</script>
<!-- END Criteo Product Tag -->

<?php
}
?>
<script>

    $(document).ready(function(){
        $('#product-form input:checkbox').click(function(){
            var product_option_id= $(this).data('productid');
            var product_id= $('[name="product_id"]').val();

            var is_add_to_cart=0;
            if($(this).prop("checked") == true){
                var is_add_to_cart=1;
            }
            $('#img_loader').show();
            $.ajax({
                url: 'index.php?route=checkout/cart/addproductcampaign',
                type: 'post',
                data: { product_id :product_id,is_add_to_cart:is_add_to_cart,product_option_id:product_option_id },
                dataType: 'json',
                success: function (response) {
                    $('#img_loader').hide();
                    if (response.text_items_only) $('#cart-total').text(response.text_items_only);
                    if(response.success) {
                        new Noty ({
                            theme: 'mint',
                            type: 'success',
                            layout: 'bottomCenter',
                            text: response.success,
                            timeout: 5000,
                            closeWith: ['button'],
                            animation: {
                                open : 'animated fadeInUp',
                                close: 'animated fadeOutDown'
                            },
                            callbacks: {
                                onTemplate: function() {
                                    this.barDom.innerHTML = '<div class="noty_body" style="background-color: #AC6E82;">' + this.options.text + '<div>';
                                }
                            }
                        }).show ()


                    }
                    else if(response.error)
                        new Noty ({
                            theme: 'mint',
                            type: 'success',
                            layout: 'bottomCenter',
                            text: response.error,
                            timeout: 5000,
                            closeWith: ['button'],
                            animation: {
                                open : 'animated fadeInUp',
                                close: 'animated fadeOutDown'
                            },
                            callbacks: {
                                onTemplate: function() {
                                    this.barDom.innerHTML = '<div class="noty_body" style="background-color: #AC6E82;">' + this.options.text + '<div>';
                                }
                            }
                        }).show ()
                }
            });

        });
    });

</script>

<script>
    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;
                }
            });
        }
    });
</script>
<!-- RichSnippets -->
<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement":<?php echo $breadcrumbs1; ?>
    }
</script>
<script type="application/ld+json">
{
 "@context": "https://schema.org/",
 "@type": "Product",
 "name": "<?php echo $rich_snippets['name']; ?>",
 "image": [<?php echo $rich_snippets['image']; ?>],
 "description":<?php if (!empty($rich_snippets['priceValidUntil'])) { ?> "<?php echo $rich_snippets['description']; ?>",<?php }else{
 ?>
 "<?php echo $rich_snippets['name']; ?>",
 <?php
 }?>
 "sku": "<?php echo $rich_snippets['sku']; ?>",
 "mpn": "<?= rand(10,1000000); ?>",
 <?php if (!empty($rich_snippets['brand'])) { ?>
 "brand":{
   "@type": "Thing",
   "name": "<?php echo $rich_snippets['brand']; ?>"
 },
 <?php } else{
 ?>
 "brand":{
   "@type": "Thing",
   "name": "Phone"
 },
 <?php
 } ?>
  "review": {
        "@type": "Review",
        "reviewRating": {
          "@type": "Rating",
          "ratingValue": "4",
          "bestRating": "5"
        },
        "author": {
          "@type": "Person",
          "name": "Fred Benson"
        }
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.7",
        "reviewCount": "<?= rand(10,1000); ?>"
      },
 "offers":{
   "@type": "Offer",
   "priceCurrency": "<?php echo $rich_snippets['priceCurrency']; ?>",
   "price": "<?php echo $rich_snippets['price']; ?>",
   "itemCondition": "https://schema.org/NewCondition",
   <?php if (!empty($rich_snippets['priceValidUntil'])) { ?>
   "priceValidUntil": "<?php echo $rich_snippets['priceValidUntil']; ?>",
   <?php }else{?>
    "priceValidUntil": "2022-11-20",
    <?php
    } ?>
   "availability": "https://schema.org/<?php echo $rich_snippets['availability']; ?>",
   "url": "<?php echo $rich_snippets['url']; ?>",
   "seller":{
	"@type": "Organization",
	"name": "<?php echo $rich_snippets['seller_name']; ?>"
   }
  }
}
</script>

<!-- RichSnippets -->

<?php echo $footer; ?>

<input type='hidden' id='fbProductID' value='<?= $product_id ?>' />


<?php if($product_type==7 || $product_type==9): ?>
<script>
    var styleImages={};
    var _URL = window.URL || window.webkitURL;
    $("#custom_image").change(function (e) {
        $('.uploader').submit();
        if(1==2){
            var file, img;
            if ((file = this.files[0])) {
                img = new Image();
                img.onload = function () {
                    if (this.width < 1080 || this.height < 1920) {
                        alert('Lütfen 1080 * 1920 boyutundan daha büyük resim yükleyin!');
                    } else {
                        $('.uploader').submit();
                    }
                };
                img.src = _URL.createObjectURL(file);
            }
        }
    });
    $(document).ready(function (e) {
        $(".uploader").on('submit',(function(e) {
            //unset previous image
            var prev_image=$('#sample_picture');
            prev_image.guillotine('remove');
            $('#sample_picture').remove();
            e.preventDefault();
            $.ajax({
                url: "index.php?route=piyerSoft/cases/AjaxUploadimage",
                type: "POST",
                data:  new FormData(this),
                contentType: false,
                cache: false,
                processData:false,
                beforeSend : function()
                {
                    $('#img_loader').show();
                },
                success: function(json) {
                    if(json['customer_upload_image']){
                        $('.frame').html('<img id="sample_picture" src="" >');
                        var image_src=json['customer_upload_image'];
                        $('#org_img').val(image_src);
                        guillotineImage(image_src);
                        var product_type = $('input[name="product_type"]').val();
                        if(product_type==9){
                            var canvas = $('#c_img')[0];
                            canvas.width=90;
                            var ctx = canvas.getContext("2d");
                            var img = new Image();
                            img.src = image_src;
                            img.onload = function () {
                                // set size proportional to image
                                canvas.height = canvas.width * (img.height / img.width);
                                // step 1 - resize to 50%
                                var oc = document.createElement('canvas'),
                                    octx = oc.getContext('2d');
                                oc.width = img.width * 0.5;
                                oc.height = img.height * 0.5;
                                octx.drawImage(img, 0, 0, oc.width, oc.height);
                                // step 2
                                octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);
                                // step 3, resize to final size
                                ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
                                    0, 0, canvas.width, canvas.height);
                            }
                        }
                        $('#button-cart, #button-checkout').removeClass ('disabled d-none');
                    }else{
                        $('#img_loader').hide();
                        alert(json['error']);
                    }
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    $('#img_loader').hide();
                    alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                }
            });
        }));
    });
</script>

<script>
    function guillotineImage(image_src){

        $('#sample_picture').attr('src',image_src);
        var picture = $('#sample_picture');
        picture.on('load', function () {
            $('#img_loader').hide();
            // Initialize plugin (with custom event)
            picture.guillotine({
                // width: 226,
                // height: 403,
                //init: { angle: 0, x: 0,y:0 },
                eventOnChange: 'guillotinechange'
            });
            // Display inital data
            var data = picture.guillotine('getData');
            for (var key in data) {
                $('#' + key).val(data[key]);
            }
            picture.guillotine('fit');
            data.scale = parseFloat(data.scale.toFixed(4));
            for (var k in data) {
                $('#' + k).val(data[k]);
            }
            // Bind button actions
            $('#rotate_left').click(function () {
                picture.guillotine('rotateLeft');
            });
            $('#rotate_right').click(function () {
                picture.guillotine('rotateRight');
            });
            $('#fit').click(function () {
                picture.guillotine('fit');
            });
            $('#zoom_in').click(function () {
                picture.guillotine('zoomIn');
            });
            $('#zoom_out').click(function () {
                picture.guillotine('zoomOut');
            });

            // Update data on change
            picture.on('guillotinechange', function (ev, data, action) {
                data.scale = parseFloat(data.scale.toFixed(4));
                for (var k in data) {
                    $('#' + k).val(data[k]);
                }
            });
        });
    }

</script>

<script>
    $(document).ready(function (e) {
        $(".styling").on('click',(function(e) {
            var filepath=$('#org_img').val();
            e.preventDefault();
            if(filepath==''){
                alert('lütfen bir resim yükle');
                return false;
            }
            $('#img_loader').show();
            var prev_image=$('#sample_picture');
            prev_image.guillotine('remove');
            $('#sample_picture').remove();
            $('.frame').html('<img id="sample_picture" src="" >');

            var styleId=$(this).attr('id');
            if(styleId==''){
                guillotineImage(filepath);
            }else{

                already_exist_path=false;
                var file_name=filepath.split("/").pop().split(".")[0];
                already_exist_path='';
                if (styleImages[styleId]) {
                    for (var key in styleImages[styleId]) {
                        if (file_name == styleImages[styleId][key]['fileName']) {
                            already_exist_path = styleImages[styleId][key]['filePath'];
                            break;
                        }
                    }
                }
                if(already_exist_path){
                    guillotineImage(already_exist_path);
                    return false;
                }

                $.ajax({
                    url: "index.php?route=piyerSoft/cases/getDeeparteffectImage",
                    type: "POST",
                    data: {filepath:filepath,styleId:styleId  },
                    dataType: 'json',
                    beforeSend : function()
                    {
                        $('#img_loader').show();
                    },
                    success: function(json) {
                        if(json['imageUrl']){

                            var image_src=json['imageUrl'];
                            guillotineImage(image_src);
                            var file_name=filepath.split("/").pop().split(".")[0];
                            if(!styleImages[styleId]){
                                styleImages[styleId]=new Array();
                            }
                            styleImages[styleId].push({
                                'fileName':file_name,
                                'filePath':image_src
                            });

                        }else{
                            $('#org_img').val('');
                            $('#img_loader').hide();
                            alert(json['error']);
                        }
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        $('#img_loader').hide();
                        alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                    }
                });
            }
        }));
    });
</script>

<script>
    function upload() {
        var percentage = null,
            clippaper = document.querySelector('.uploader__clip'),
            clippaperLength = clippaper.getTotalLength();
        clippaper.style.strokeDasharray = clippaperLength;
        clippaper.style.strokeDashoffset = -clippaperLength;
        function Init() {
            var fileSelect = document.querySelector('.uploader__input'),
                fileDrag = document.querySelector('.uploader__label'),
                fileSize = null;
            fileSelect.addEventListener('change', fileSelectHandler, false);
            // Is XHR2 available?
            var xhr = new XMLHttpRequest();
            if (xhr.upload) {
                // File Drop
                fileDrag.addEventListener('dragover', fileDragHover, false);
                fileDrag.addEventListener('dragleave', fileDragHover, false);
                fileDrag.addEventListener('drop', fileSelectHandler, false);
            }
        }
        function fileDragHover(e) {
            var fileDrag = document.querySelector('.uploader__label');
            e.stopPropagation();
            e.preventDefault();
            fileDrag.className = (e.type === 'dragover' ? 'uploader__label hover' : 'uploader__label');
        }
        function fileSelectHandler(e) {
            document.querySelector('.uploader').classList.add('uploading');
            // Fetch FileList object
            var files = e.target.files || e.dataTransfer.files;
            // Cancel event and hover styling
            fileDragHover(e);
            // Process all File objects
            for (var i = 0, f; f = files[i]; i++) {
                parseFile(f);
                uploadFile(f);
            }
        }
        function parseFile(file) {
            // console.log(file.name);
            var imageName = file.name;
            var isGood = (/\.(?=gif|jpg|png|jpeg)/gi).test(imageName);
            if (isGood) {
                // Thumbnail Preview
                document.querySelector('.uploader__file').src = URL.createObjectURL(file);
            } else {
                document.querySelector('.uploader').reset();
            }
        }
        function updateFileProgress(e) {
            if (e.lengthComputable) {
                percentage = (e.loaded / fileSize) * 100;
                clippaper.style.strokeDashoffset = (-clippaperLength + (percentage * clippaperLength) / 100);
                if (e.loaded === fileSize) {
                    document.querySelector('.uploader__file').classList.add("show");
                }
            }
        }
        function uploadFile(file) {
            fileSize = file.size;
            var xhr = new XMLHttpRequest(),
                fileSizeLimit = 1024; // In MB
            if (xhr.upload) {
                // Check if file is less than x MB
                if (file.size <= fileSizeLimit * 1024 * 1024) {
                    // Progress bar
                    xhr.upload.addEventListener('progress', updateFileProgress, false);
                    // File received / failed
                    xhr.onreadystatechange = function (e) {
                        if (xhr.readyState == 4) {
                            // Everything is good!
                            // progress.className = (xhr.status == 200 ? "success" : "failure");
                            // document.location.reload(true);
                        }
                    };
                    // Start upload
                    xhr.open('POST', document.querySelector('.uploader').action, true);
                    xhr.setRequestHeader('X-File-Name', file.name);
                    xhr.setRequestHeader('X-File-Size', file.size);
                    xhr.setRequestHeader('Content-Type', 'multipart/form-data');
                    xhr.send(file);

                } else {
                    console.log('Lütfen (' + fileSizeLimit + ' MB)\'dan küçük bir fotoğraf yükleyin');
                }
            }
        }
        // Check for the various File API support.
        if (window.File && window.FileList && window.FileReader) {
            Init();
        } else {
            document.querySelector('.uploader__labele').style.display = 'none';
        }
    }
    upload();
</script>

<script src="/catalog/view/theme/deercase/stylesheet/guillotine/jquery.guillotine.js" type="text/javascript"></script>
<script>
    function addcustomimage(ButtonID){

        var image = $('#sample_picture').attr('src');
        // var zoomfactor = $('#zoomfactor').val();
        var quantity = $('#input-quantity').val();
        var product_id = $('input[name="product_id"]').val();
        var product_type = $('input[name="product_type"]').val();
        var filepath=$('#org_img').val();
        if(filepath==''){
            alert('lütfen bir resim yükle');
            return false;
        }
        var picture = $('#sample_picture');
        var data = picture.guillotine('getData');
        $('#img_loader').show();
        $.ajax({
            url: 'index.php?route=piyerSoft/cases/generatecustomcase',
            type: 'post',
            data: {product_type:product_type, image: image, data: data},
            dataType: 'json',
            beforeSend: function () {
                $('#button-cart').button('loading');
            },
            complete: function () {
                $('#button-cart').button('reset');
            },
            success: function (res) {
                var image = '';
                if (res.responce == 'success') {
                    image = res.file;
                    $.ajax({
                        url: 'index.php?route=checkout/cart/add',
                        type: 'post',
                        data: {customcaseimage: image, product_id: product_id, quantity: quantity},
                        dataType: 'json',
                        beforeSend: function () {
                            $('#button-cart').button('loading');
                        },
                        complete: function () {
                            $('#button-cart').button('reset');
                        },
                        success: function (responce) {
                            $('#sample_picture').attr('src','');
                            $('#org_img').val('');
                            $(".uploader")[0].reset();
                            $('#img_loader').hide();
                            upload();
                            if (responce.success) {
                                if (ButtonID == "button-checkout") window.location.href = '/odeme';
                                new Noty ({
                                    theme: 'mint',
                                    type: 'success',
                                    layout: 'bottomCenter',
                                    text: responce.success,
                                    timeout: 5000,
                                    closeWith: ['button'],
                                    animation: {
                                        open : 'animated fadeInUp',
                                        close: 'animated fadeOutDown'
                                    },
                                    callbacks: {
                                        onTemplate: function() {
                                            this.barDom.innerHTML = '<div class="noty_body" style="background-color: #AC6E82;">' + this.options.text + '<div>';
                                        }
                                    }
                                }).show ()
                                if (responce.text_items_only) $('#cart-total').text(responce.text_items_only);
                            }else{
                                for (e in responce.error.option)
                                    new Noty ({
                                        theme: 'mint',
                                        type: 'success',
                                        layout: 'bottomCenter',
                                        text: response.error.option [e],
                                        timeout: 5000,
                                        closeWith: ['button'],
                                        animation: {
                                            open : 'animated fadeInUp',
                                            close: 'animated fadeOutDown'
                                        },
                                        callbacks: {
                                            onTemplate: function() {
                                                this.barDom.innerHTML = '<div class="noty_body" style="background-color: #AC6E82;">' + this.options.text + '<div>';
                                            }
                                        }
                                    }).show ()
                            }

                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            $('#img_loader').hide();
                            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                        }
                    });
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                $('#img_loader').hide();
                alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            }
        });
    }
</script>
<?php endif; ?>

<!-- Advanced Sharing: Begin -->
<script>
    /*var AdvancedSharing = function () {
        var inputNames = ["customizetext", "gradienttext"], buttonProps = ["font", "color", "texture", "position"];
        var URL = '', Params = '';
        if (URL.indexOf ('#')) URL = window.location.href.split ('#') [0];
        else URL = window.location.href;
        URL = URL.split ('/') [window.location.href.split ('/').length - 1];
        var Params = URL.split ('&');
        Params.shift ();
        Params.forEach (function (Param) {
            if (inputNames.indexOf (Param.split ('=')[0]) != -1)
                $('[name="' + Param.split ('=')[0] + '"]').val (Param.split ('=')[1]).trigger ('keyup');
            else if (buttonProps.indexOf (Param.split ('=')[0]) != -1)
                $('[data-'+ Param.split ('=')[0] + '="' + Param.split ('=')[1] + '"]').click ();
        });
        $('#kisisellestir input').focusin (function () {
            $(this).data ('val', $(this).val ());
        });
        $('#kisisellestir input').change (function () {
            var oldText = ($(this).attr ('name') + "=" + $(this).data ('val')), newText = ($(this).attr ('name') + "=" + $(this).val ());
            var targetLink = "";
            if (window.location.href.indexOf ($(this).attr ('name')) != -1) targetLink = window.location.href.replace (oldText, newText);
            else targetLink = window.location.href + ("&" + newText);
            window.history.replaceState (null, null, targetLink);
            addthis.layers.refresh ();
        });
        buttonProps.forEach (function (buttonProp) {
            $('[data-' + buttonProp + ']').click (function () {
                var oldValue = ("(" + buttonProp + "\=.+?)(&|$)"), newValue = (buttonProp + "=" + $(this).attr ('data-'+ buttonProp));
                if (window.location.href.match (new RegExp (oldValue, "g")) && window.location.href.match (new RegExp (oldValue, "g"))[0].indexOf ("&") != -1) newValue += "&";
                var targetLink = "";
                if (window.location.href.indexOf (buttonProp) != -1) targetLink = window.location.href.replace (new RegExp (oldValue, "g"), newValue);
                else targetLink = window.location.href + ("&" + newValue);
                window.history.replaceState (null, null, targetLink);
                addthis.layers.refresh ();
            });
        });
    };*/
</script>
<!-- Advanced Sharing: End -->

<link rel="stylesheet" href="https://scripts.piyersoft.com/libs/select2/css/select2.min.css" />
<script src="https://scripts.piyersoft.com/libs/select2/js/select2.min.js"></script>
<? foreach ($options as $option): ?>
<? if ($option ['type'] == 'select'): ?>
<script>
    window.onload = function () {
        var Interval__Select2_<?= $option ['product_option_id']; ?> = setInterval (function () {
            $('select[name="option[<?= $option ['product_option_id']; ?>]"]').select2 ();
            if ($('[name="option[<?= $option ['product_option_id']; ?>]"]').attr ('data-select2-id') !== undefined) clearInterval (Interval__Select2_<?= $option ['product_option_id']; ?>);
        }, 250);
    };
</script>
<? endif; ?>
<? endforeach; ?>


<script>


    $(document).ready(function() {


        setTimeout(function(){

            var model = $("input[name='model']").val();

            if (model.indexOf("bnd") >= 0){


                $('div#product-form > div:nth-of-type(3)').remove();

            }


        }, 300);



    });

</script>

