<?php
echo $header;
$protocol = ((!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off') || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "https://";
$base_url1 = $protocol . $_SERVER['HTTP_HOST'];
?>


<style>
#pimage1{
  display:none!important;
}
.instagram-color.btn {
    color: #fff;
    background-color: #2a4375;
    width:100%!important;
}
.king-size {
    height: 60px;
    line-height: 60px;
    padding: 0 33px;
    font-size: 18px;
}
.text-big {
    font-size: 18px;
    line-height: 28.6px;
}
.mr1 {
    margin-right: 11px;
}
.instagram-color.btn {
    color: #fff;
    background-color: #2a4375;
}
.king-size {
    height: 45px;
    line-height: 45px;
    padding: 0 33px;
    font-size: 18px;
}
    #insta_imgs img{
      cursor: pointer;
      transition: transform .5s ease;
      overflow:hidden;
    }
    #insta_imgs img:hover {
      transform: scale(1.1);
    }
    #text_on_img{
    border: solid 1px #a9a9a9;
    padding: 5px 9px;
    color: #363636;
    font-size: 16px;
    width: 100%;
    outline: 0;
    margin-bottom:10px;
    }
    .image-additional{
      display:none;
    }
    #sample_picture{
      width: auto;
      margin-top:71px;
      transform:rotate(16deg);
      border: 2px solid #fff;
      border-style: groove;
      margin-left:9px;
      margin-right:0px;
    }
    .frame{
      position:absolute;
      margin-top:100px;
    }
    .outer_cls{
          width: 553.886px;
          height: 580px;
          overflow: hidden;
    }
    .img_container{
          max-width:100%;
          height: auto;
          
    }
    .sweet-modal-content{
      padding:10px!important;
    }
    
    .mid_div{
          width: 550px;
          height: 580px;
          background: transparent;
          margin: 10px auto;
          position: relative;
    }
    .cropme-rotation-slider{
      margin-top:10px;
    }
    .cropme-slider{
      margin-left:10px;
      position:absolute;
    }
    .uploader {
        display: block;
        margin: 0 auto;
    }

    .uploader__input {
        display: none;
    }

    .uploader__label {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        //height: 50%;
        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>

<style>
  .styling {
    cursor: pointer;
  }
    .styling img {}
    .styling #c_img {
      background-color: #000;
      margin-bottom: -6px;
      object-fit: cover;
      height: 90px;
      width: 90px;
    }
    .styling img, .styling #c_img {
      transition: transform .2s;
    }
    .styling:hover img, .styling:hover #c_img {
      transform: scale(.9);
    }
  #controls {
    background-color: transparent;
    margin: 40px 0 0 30px;
  }
    #controls a {
      box-shadow: 0 0 5px -2px rgba(0, 0, 0, .58);
      margin-bottom: 15px;
      text-align: center;
      border-radius: 50%;
      line-height: 32px;
      display: block;
      height: 40px;
      width: 40px;
      color: #000;
    }
    #controls1 {
    background-color: transparent;
    margin: 0px 0 0 0px;
  }
    #controls1 a {
      box-shadow: 0 0 5px -2px rgba(0, 0, 0, .58);
      margin-bottom: 15px;
      text-align: center;
      border-radius: 50%;
      line-height: 32px;
      display: block;
      height: 40px;
      width: 40px;
      color: #000;
    }

  #Loader--9 {
    background-color: rgba(255, 255, 255, .6) !important;
    justify-content: center !important;
    align-items: center !important;
    position: fixed !important;
    height: 100vh !important;
    width: 100vw !important;
    z-index: 3 !important;
    left: 0 !important;
    top: 0 !important;
    display: flex;
  }
    #Loader--9 p {
      font-weight: 600 !important;
      margin-top: 15px !important;
      font-size: 16px !important;
    }
    

  @media (max-width: 768px)
  {
    .PP__Title {
      margin-bottom: -10px !important;
      margin-top: 125px !important;
      font-size: 14px !important;
      width: 100% !important;
    }

    #ScrollToTop {display: none !important;}
    #sample_picture{
        width: 93%!important;
        margin-top: 70px!important;
        margin-left: 10px;

    }
    .viewport{
      margin-left:17px!important;
    }
    .cropme-wrapper{
      width:60%!important;
    } 
    .cropme-slider{
      z-index:9;
      margin-left:58px;
    }
  }
  @font-face {
    font-family: 'besiktas';
    src: url("<?php echo $base_url1.'/catalog/view/theme/deercase/stylesheet/besiktas.ttf';?>");
}



.MultiCarousel { float: left; overflow: hidden; padding: 15px; width: 100%; position:relative; }
    .MultiCarousel .MultiCarousel-inner { transition: 1s ease all; float: left; }
        .MultiCarousel .MultiCarousel-inner .item { float: left;}
        .MultiCarousel .MultiCarousel-inner .item > div { text-align: center; padding:10px; margin:10px; background:#f1f1f1; color:#666;}
    .MultiCarousel .leftLst, .MultiCarousel .rightLst { position:absolute; border-radius:50%;top:calc(50% - 20px); }
    .MultiCarousel .leftLst { left:0; }
    .MultiCarousel .rightLst { right:0; }
    
.MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over { pointer-events: none; background:#ccc; }

</style>
<script src="/catalog/view/theme/deercase/stylesheet/cropme/cropme.js" ></script>
<link href="/catalog/view/theme/deercase/stylesheet/cropme/cropme.css" media="screen" rel="stylesheet" type="text/css">

<script type="text/javascript" src="/catalog/view/theme/deercase/stylesheet/compressor.min.js"></script>



<div class="container-fluid p-0 bread_backg">
  <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>
<?php
 $loader_img=str_replace("/ /","",HTTPS_SERVER).'image/loader.gif';
?>
<div id="img_loader" class="lodaer_class">
  <img src="<?php echo $loader_img;?>" class="loadinggif" >
</div>

<div id="Loader--9" class="d-none">
  <div>
    <img src="/image/painting-gif.gif" alt="" />
    <p>Görsel yükleniyor...</p>
  </div>
</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; ?>">
        
          <? //$__fImage = false; ?>

          <ul class="thumbnails">
            <li class="owl-carousel custom-0008">
              <div class="ThumbBox--Customization" id="img_canvas">
              <div id="canvas_media">
              <img id="pimage" src="" width="500" />
              <canvas id="pcanvas" width="480" height="480" style="display:none"></canvas>
              <img id="pimage1" src="" width="500" style="display: none!important;" />
              </div>
              </div>
              
            </li>
            <div class="clearfix hidden-xs"></div>
            <br class="hidden-xs" />
            <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>
            <?php foreach ($images as $index => $image): ?>
              <li class="image-additional hidden-xs">
                <a class="thumbnail border-0" href="javascript: $('.thumbnails > .owl-carousel').trigger ('to.owl', [<?= $index + 1; ?>, 300]);">
                  <img src="<?= $image['thumb']; ?>" data-src="<?= $image['popup']; ?>" />
                </a>
              </li>
            <?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 -->


        <?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;?>" />
          <br />
          <?php if ($price) { ?>
          <ul class="list-unstyled float-left">
            <?php if (!$special) { ?>
            <li>
              <h3 class="d-inline PP__Price"><?php echo $price; ?></h3>
              <b>-</b> <p class="campaign_text d-inline" style="font-weight: 700; color:red;"> - 3 Al 2 Öde! Ücretsiz Kargo!</p>
            </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>
              <b>-</b> <p class="campaign_text d-inline" style="font-weight: 700; color:red;"> - 3 Al 2 Öde! Ücretsiz Kargo!</p>
            </li>
            <?php } ?>
          </ul>
          <?php } ?>

          <style>
            .StepStep {
              border-top-left-radius: 20px;
              background-color: #EFEFEF;
              padding: 15px;
            }
              .StepStep .StepsBTNs {}
                .StepStep .StepsBTNs .StepBTN ,.StepStep .StepsBTNs .StepBTN1 {
                  border-top-left-radius: 15px !important;
                  border-bottom: solid 5px #EFEFEF;
                  background-color: #FFF;
                  margin-right: 7.5px;
                  border-right: none;
                  border-left: none;
                  box-shadow: unset;
                  border-top: none;
                  font-weight: 600;
                  color: #000;
                  outline: 0;
                }
                .StepStep .StepsBTNs .StepBTN.StepBTN--Active {
                  border-bottom-color: #FFF;
                }
              .StepStep .Steps {}
                .StepStep .Steps .Step {
                  background-color: #FFF;
                  padding: 20px;
                  display: none;
                }
                .StepStep .Steps .Step.Step--Active {
                  display: block;
                }
                  .StepStep .Steps .Step .NextStepBTN {
                    background-color: #ACD96A;
                    margin: -35px -5px 0 0;
                    border-radius: 25px;
                    font-weight: 600;
                    font-size: 14px;
                    padding: 10px;
                    border: none;
                    float: right;
                    color: #000;
                    outline: 0;
                  }
                    .StepStep .Steps .Step .NextStepBTN .NextStepBTN--Icon {
                      background-color: #FFF;
                      display: inline-block;
                      text-align: center;
                      border-radius: 50%;
                      line-height: 20px;
                      color: #ACD96A;
                      height: 20px;
                      width: 20px;
                    }
                  .StepStep .Steps .Step .BuyBox {
                    margin: 15px 0 -26px -19px;
                    width: calc(100% + 39px);
                    display: inline-block;
                  }
                    .StepStep .Steps .Step .BuyBox .PP__Button {
                      font-size: 14px;
                      width: 100%;
                    }

            @media (max-width: 768px)
            {
              .StepStep {
                border-top-left-radius: 0;
                margin-left: -30px;
                width: 100vw;
              }
                .StepStep .Steps {}
                  .StepStep .Steps .Step {}
                    .StepStep .Steps .Step .Styling--Scroller {
                      justify-content: flex-start;
                      align-items: center;
                      overflow-y: hidden;
                      overflow-x: scroll;
                      display: flex;
                    }

              .IntroJS__FirstTooltip {
                left: 0 !important;
              }
                .IntroJS__FirstTooltip .introjs-helperNumberLayer {
                  margin-left: 20px !important;
                }
                .IntroJS__FirstTooltip .introjs-arrow {
                  left: 30px !important;
                }
              .IntroJS__SecondTooltip {
                margin-left: -75px !important;
              }
              .IntroJS__ThirdTooltip {
                margin-left: -165px !important;
              }
                .IntroJS__ThirdTooltip .introjs-arrow {
                  right: 50px !important;
                  left: unset !important;
                }
            }
          </style>

          <div class="">
            <div class="Steps">
              <div class="Step Step--1 Step--Active">
                <label class="PP__OptionTitle">Telefon Modelini Seçiniz</label>
                <div class="selectbox-wrapper ml-0 custom-0002">
                    <select class="CategorySelectbox mb-0" id="all_categories" >
                    </select>
                </div>

                <div class="selectbox-wrapper custom-0002">
                    <select class="CategorySelectbox mb-0" id="sub_categories">
                    </select>
                </div>
                <style>
                    select.CategorySelectbox {
                        border: none;
                    }
                </style>

                <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="">
                <label class="PP__OptionTitle">Kılıf Rengini Seçin</label>
                <div class="row px-15" id="attribute_color_cases">
                  <div class="clearfix"></div>
                  <br>
                </div>
                  <div class="StepStep">
                    <div class="StepsBTNs btn-group" role="group">
                      <button type="button" class="StepBTN StepBTN--Active btn" data-intro="2. Adım" data-position="top-right-aligned" data-tooltipClass="IntroJS__ThirdTooltip">Upload</button>
                      <!--<button type="button" class="StepBTN btn" data-intro="1. Adım" data-position="top" data-tooltipClass="IntroJS__FirstTooltip">Instagram</button>-->
                    </div>
                    <div class="Steps">
                      <div class="Step Step--0 Step--Active">
                        <label class="PP__OptionTitle">Fotoğraf Yükleyin</label>
                        <form 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>
                      </div>
                      <div class="Step Step--1">
                        <div id="insta_imgs" style="min-width:40; min-height:100px"></div>
                        <a  onClick="display_window()" class="ext-source-btn btn king-size btn-block instagram-color" href="javascript: void(0);"> 
                          <i class="text-big mr1" data-icon="" aria-hidden="true"></i>
                          <span class="instagram-btn-text">Instagram</span>
                        </a>
                      </div>
                    </div>
                  </div>
                  <label class="PP__OptionTitle">Yazı Ekleyin</label>
                  <input type="text" id='text_on_img' maxlength="27"  placeholder="" autocomplete="off" />
                   <label class="PP__OptionTitle">Tasarım Seçin</label>
                  <div class="Styling--Scroller row">
                  <script>
                    var filterIds = [];
                  </script>
                  <div class="row" style="margin-top: 40px;">
                <div class="categories-carousel owl-carousel">
                    <?php foreach($cover_names as $key=>$name){ ?>
                    <div class="item p-10 text-left">
                        <a href="javascript:void(0)" data-filter="<?=$key;?>" class="filter_change styling" id="<?php echo $key;?>">
                            <img src="<?=$name;?>" alt="" class="w-100" style="border-radius: 10px; margin-bottom: 10px;" />
                            <!--<strong style="font-size: 14px;"><?=$key;?></strong>-->
                            <br />
                            <br class="visible-xs" />
                            <br class="visible-xs" />

                            <script>filterIds.push(<?=$key;?>)</script>

                        </a>
                    </div>
                    <?php } ?>
                </div>

                <style>
                    .categories-carousel .owl-carousel .owl-nav button.owl-prev {
                        padding: 15px!important;
                    }
                    .categories-carousel .owl-carousel .owl-nav button.owl-next {
                        padding: 15px!important;
                    }
                    .categories-carousel {
                        /* margin-bottom: 25px !important;
                        padding-top: 60px !important; */
                    }
                    .categories-carousel .owl-stage {
                        margin-left: -150px;
                    }
                    .categories-carousel .owl-stage-outer {
                        margin-left: 10px;
                        margin-right: 10px;
                    }
                    .categories-carousel .owl-nav {
                        /*display: none !important;  Gizledik, şimdilik. */
                        justify-content: space-between !important;
                        display: flex !important;
                        width: 100% !important;
                        position: absolute;
                        top: 50px;
                    }
                    .categories-carousel .owl-nav .owl-prev,
                    .categories-carousel .owl-nav .owl-next {
                        font-size: 70px !important;
                        outline: 0 !important;
                    }

                    .categories-carousel-bottom {
                        margin-bottom: 25px !important;
                        padding-top: 60px !important;
                    }


                    @media screen and (max-width: 768px) {
                        .categories-carousel {
                            margin-bottom: -25px !important;
                            padding-top: 0 !important;
                        }
                        .categories-carousel .owl-stage {
                            left: -15px !important;
                        }
                        .categories-carousel .owl-nav {
                            display: none !important;
                        }
                        .fixed-categories-carousel .owl-stage {
                            left: -15px !important;
                        }
                        .fixed-categories-carousel .item.p-10 {
                            padding-bottom: 0px !important;
                        }

                        #ScrollToTop {
                            margin-bottom: 110px;
                        }

                    }
                </style>

                <!--
                <div class="fixed-categories-carousel owl-carousel"
                     style="position:fixed; bottom: 0px; background-color: white; margin-bottom: 0; z-index:999;">
                    <?php // foreach ($filters as $filter){ ?>
                    <div class="item p-10">
                        <a href="javascript:void(0)" data-filter="<?=$filter['filter_id'];?>" class="filter_change fixed_filter_change_add">
                            <img src="<?=$filter['filter_image'];?>" alt="" class="w-100" style="border-radius: 10px; margin-bottom: 10px;" />

                        </a>
                    </div>
                    <?php // } ?>
                </div>
                -->

                <script>
                    jQuery (function ($) {
                      var auto_play=false;
                      if (jQuery(window).width() < 768){
                        auto_play:true;
                        console.log('auto_play: '+auto_play);
                      }
                        $('.categories-carousel').owlCarousel ({
                            items: 1,
                            autoplay: auto_play,
                            nav: true,
                            //center:true,
                            loop:true,
                            responsive: {
                                0: {
                                    items: 2,
                                    stagePadding: 30
                                },
                                768: {
                                    items: 3
                                },
                                1024: {
                                    items: 4
                                },
                                1366: {
                                    items: 5
                                }
                            }
                        });

                        $('.categories-carousel-bottom').owlCarousel ({
                            items: 1,
                            responsive: {
                                0: {
                                    items: 2,
                                    stagePadding: 30
                                },
                                768: {
                                    items: 3
                                },
                                1024: {
                                    items: 4
                                },
                                1366: {
                                    items: 5
                                }
                            }
                        });

                        /*$('.fixed-categories-carousel').owlCarousel ({
                            items: 1,
                            slideTransition: 'linear',
                            responsive: {
                                0: {
                                    items: 4,
                                    stagePadding: 15
                                },
                                768: {
                                    items: 8
                                }
                            }
                        });*/


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



                    });

                    function checkFixedMenu() {
                        if ($(window).height() < $(window).scrollTop()) {

                            if ($(window).width() < 768)
                                $('.fixed-categories-carousel').show();

                        } else {

                            //if ($(window).width() < 768)
                            $('.fixed-categories-carousel').hide();

                        }
                    }
                </script>
            </div>
                 </div><br><br>
                <div class="BuyBox">
                      <button type="button" id="button-cart" data-loading-text="<?php echo $text_loading; ?>" class="hk-button"><?php echo $button_cart; ?> <i class="fa fa-shopping-cart"></i></button>
                      <button type="button" id="button-nostock" class="PP__Button btn btn-primary btn-lg w-100 d-none">Tükendi</button>
                </div>
                <style type="text/css">.hk-button{border: none;width: 100%;height: 40px;font-size: 18px;background: green;color: white;}</style>
              </div>
            </div>
          </div>
          </di>

          <canvas id="pcanvas2" width="1050" height="1920" style="display:none;"></canvas>

<form id="myAwesomeForm" method="post" action="/php-code-that-handles-fileupload.php" style="display:none;">
    <input type="text" id="filename" name="filename"  /> <!-- Filename -->
    <input type="submit" id="submitButton" name="submitButton" /> <!-- Submit -->
</form>
          <script>
    $(document).ready(function () {
    var itemsMainDiv = ('.MultiCarousel');
    var itemsDiv = ('.MultiCarousel-inner');
    var itemWidth = "";

    $('.leftLst, .rightLst').click(function () {
        var condition = $(this).hasClass("leftLst");
        if (condition)
            click(0, this);
        else
            click(1, this)
    });

    ResCarouselSize();




    $(window).resize(function () {
        ResCarouselSize();
    });

    //this function define the size of the items
    function ResCarouselSize() {
        var incno = 0;
        var dataItems = ("data-items");
        var itemClass = ('.item');
        var id = 0;
        var btnParentSb = '';
        var itemsSplit = '';
        var sampwidth = $(itemsMainDiv).width();
        var bodyWidth = $('body').width();
        $(itemsDiv).each(function () {
            id = id + 1;
            var itemNumbers = $(this).find(itemClass).length;
            btnParentSb = $(this).parent().attr(dataItems);
            itemsSplit = btnParentSb.split(',');
            $(this).parent().attr("id", "MultiCarousel" + id);


            if (bodyWidth >= 1200) {
                incno = itemsSplit[3];
                itemWidth = sampwidth / incno;
            }
            else if (bodyWidth >= 992) {
                incno = itemsSplit[2];
                itemWidth = sampwidth / incno;
            }
            else if (bodyWidth >= 768) {
                incno = itemsSplit[1];
                itemWidth = sampwidth / incno;
            }
            else {
                incno = itemsSplit[0];
                itemWidth = sampwidth / incno;
            }
            $(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers });
            $(this).find(itemClass).each(function () {
                $(this).outerWidth(itemWidth);
            });

            $(".leftLst").addClass("over");
            $(".rightLst").removeClass("over");

        });
    }


    //this function used to move the items
    function ResCarousel(e, el, s) {
        var leftBtn = ('.leftLst');
        var rightBtn = ('.rightLst');
        var translateXval = '';
        var divStyle = $(el + ' ' + itemsDiv).css('transform');
        var values = divStyle.match(/-?[\d\.]+/g);
        var xds = Math.abs(values[4]);
        if (e == 0) {
            translateXval = parseInt(xds) - parseInt(itemWidth * s);
            $(el + ' ' + rightBtn).removeClass("over");

            if (translateXval <= itemWidth / 2) {
                translateXval = 0;
                $(el + ' ' + leftBtn).addClass("over");
            }
        }
        else if (e == 1) {
            var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();
            translateXval = parseInt(xds) + parseInt(itemWidth * s);
            $(el + ' ' + leftBtn).removeClass("over");

            if (translateXval >= itemsCondition - itemWidth / 2) {
                translateXval = itemsCondition;
                $(el + ' ' + rightBtn).addClass("over");
            }
        }
        $(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');
    }

    //It is used to get some elements from btn
    function click(ell, ee) {
        var Parent = "#" + $(ee).parent().attr("id");
        var slide = $(Parent).attr("data-slide");
        ResCarousel(ell, Parent, slide);
    }

});



            var signinWin;
            var login_url="<?php echo $insta_login_url;?>";
            
            function display_window() {
                  var w=50;
                  var h=50;
                  var left = (screen.width/2)-(w/2);
                  var top = (screen.height/2)-(h/2);
                  signinWin = window.open(login_url, "SignIn", "width=780,height=410,toolbar=0,scrollbars=0,status=0,resizable=0,location=0,menuBar=0,left=left,top=top");
                  interval=setInterval(CheckLoginStatus, 1000);
                  return false;
              }

          function CheckLoginStatus() {
            
            
            $.ajax ({
            url: 'index.php?route=product/product/getInstaSession',
            dataType: 'json',
            type: 'POST',
            success: function (jSON) {
              if(jSON['insta_session'].length>0){
                $('#insta_imgs').empty();
                var imgs=jSON['insta_session'];
                for (var i = 0; i < imgs.length; i++) {
                  var img=imgs[i];
                  $('#insta_imgs').append('<img class="insta_img" src="'+img+'" height="90" width="90"/>');
                }
              clearInterval(interval);
              signinWin.close();
              }
             },
             error: function(xhr, ajaxOptions, thrownError) {
                clearInterval(interval);
                signinWin.close();
                alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
             }
          });
          }


            jQuery (function ($) {

              $('.StepStep .StepsBTNs .StepBTN').click (function () {
              $('.Step.Step--Active').removeClass ('Step--Active');
              $('.Step.Step--' + ($(this).index ())).addClass ('Step--Active');
                // -
              $('.StepBTN.StepBTN--Active').removeClass ('StepBTN--Active');
              $(this).addClass ('StepBTN--Active');
              });

              $('.StepStep .Steps .Step .NextStepBTN').click (function () {
              $('.StepStep .StepsBTNs .StepBTN').eq ($(this).parent ().index () + 1).click ();
              });

            });
          </script>
          <script>
          $(document).ready(function (e) {
          $('#pimage1').hide();
          $("#insta_imgs").on("click", ".insta_img", function(){
          var src=$(this).attr('src');
          $.ajax ({
            url: 'index.php?route=product/product/upload_img_on_server',
            dataType: 'json',
            data:{url:src},
            type: 'POST',
            success: function (jSON) {
              if(jSON['status']==1)
              {
                redraw_canvases($('#pimage').attr('src'),$('#pimage1').attr('src'));
                var img_src=window.location.origin+jSON['img_name'];
                var sweet_width=640;
                var sweet_height=810;
                if($(window).width()<=768){
                  sweet_width=sweet_width-200;
                  sweet_height=sweet_height-200;
                }
                $.sweetModal({
                        content: "<div class='mid_div'> <div class='outer_cls'><img class='img_container' id='sample_picture1' src='"+img_src+"'></div></div><div class='buttons clearfix'><div class='pull-right'></div></div></div>",
                        width: sweet_width,
                        height:sweet_height,
                        blocking:true,
                        showCloseButton:false,
                        onOpen:function(){
                          setTimeout(() => {  guillotineImage1(img_src); }, 1000);
                        },
                        buttons: {
                        someOtherAction: {
                          label: 'Done',
                          action: function() {
                            set_cropped_img();
                          }
                        },
                      }
                  });
                 //setTimeout(function(){ $('#text_on_img').keyup();$('#img_loader').hide(); }, 2000);
              }
              else{
                alert('Something went wrong');
              }
                },
                error: function(xhr, ajaxOptions, thrownError) {
                    alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                }
              });
          
          
           
          });
          
          });
          </script>
          <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">

            <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; ?>" />
              <!-- AddThis: Begin -->
              <div id="AddThis">
                  <style>
                      .addthis_inline_share_toolbox_rasr {
                          margin: 20px auto -10px;
                          text-align: center;
                      }
                      @media (max-width: 768px)
                      {
                        .at-expanding-share-button[data-position=bottom-right] {
                          margin: 25px 11px -40px !important;
                          position: relative !important;
                        }
                      }
                  </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 hidden-xs"></div>
                  <div class="addthis_inline_share_toolbox_k8f5 visible-xs"></div>
                  <script>
                    jQuery (function ($) {
                      /*var shareButtonMobile_interval = setInterval (function () {
                        $("#controls").append (
                          '<div class="ShareButtonMobile">' +
                            '<a href="javascript:;">' +
                              '<i class="fa fa-"' +
                            '</a>' +
                          '</div>'
                        );
                        if (0 < $("#controls .ShareButtonMobile").length) clearInterval (shareButtonMobile_interval);
                      }, 250);*/
                    });
                  </script>
              </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>

      <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">
            <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>

      <div class="description-blocks"></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>
<?php 
if($_SERVER['REMOTE_ADDR']=="182.187.60.173"){
  $me="hafiz";
}
else{
$me="";
}
?>
 

<div id="pcanvas1_container" style="<?php echo $me=='hafiz'?'display:block;':'display:none;'; ?>">
<canvas id="pcanvas1" width="1050" height="1920" style="<?php echo $me=='hafiz'?'display:block;':'display:none;'; ?>"></canvas>
</div>
<script>
  $('#button-cart, #button-checkout').on('click', function () {
    var ButtonID = $(this).attr ('id');
    var product_type=  $("input[name='product_type']").val();
    addcustomimage(ButtonID);
  });
</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', () => {

        console.log('sub_categories change event');


      $('.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){

          console.log('getAttributes ajax call success');


          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 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 !== ""){

              console.log('debug 1');


              b = $('a[attribute-data="'+prev+'"]');
              if (b.length == 0){

                console.log('debug 2');

                //call default one
                $('#attribute_cases').find ('.PP__Case').first().children('a').trigger ('click');
              }else{

                console.log('debug 3');

                b.trigger('click');
              }
            }else{

              console.log('debug 4');

              $('#attribute_cases').find ('.PP__Case').first().children('a').trigger ('click');
            }
            $('.bLoading, #loading').toggleClass ('d-none');
          }
          else {

            location.href = 'index.php?route=product/category/findsamecategoryNotFound';


            console.log('debug 5');

            $('.PP__OptionTitle').hide ();
            $('.PP__OptionTitle.Disabled').show ();
            $('.bLoading, #loading').toggleClass ('d-none');
          }

          console.log('debug 6');
        }
      });
    });
  });

  function getColorAttribute(attribute_id,from_attrib = 0) {

    console.log('getColorAttribute called');

    $('#button-cart, #button-checkout').addClass ('disabled');
    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('');
    $('.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-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+'"]');
            if (b.length == 0){
              //call default one
              $('#attribute_color_cases').find ('.PP__CaseCircle').first().children('a').trigger ('click');
            }else{
              b.trigger('click');
            }
          }else{
            $('#attribute_color_cases').find ('.PP__CaseCircle').first().children('a').trigger ('click');
          }
        }
      }
    });
  }

  function getFacebookPixelCode(facebook_js) {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.text = facebook_js;
    $("head").append(s);
    // facebook_loadScript();
  }
  var pcanvas_flag=0;
  var selected_pattern_id=0;

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

    console.log('cliclColorAttribute called');

     $("html, body").animate ({scrollTop: 0}, 300);
    var product_type=  $("input[name='product_type']").val();
    $('#button-cart, #button-checkout').addClass ('disabled');
    $.ajax({
      url: 'index.php?route=product/product/getProductDetail&product_id=' + product_id,
      dataType: 'json',
      type: 'POST',
      data: {product_type:product_type, attribute_id : attribute_id, product_id : product_id, href: encodeURI (window.location.href) },
      success: function(json) {
        //$('.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('');

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

        let html = '';
        
        var pattern="<?php echo $pattern1;?>";
        var impact="";
        if(json['product_info']['media'].includes("-SEFFAF-")){
         impact=json['product_info']['media'].substr(json['product_info']['media'].lastIndexOf("-SEFFAF-") + 1);
        }
        var pattern_names=<?php echo json_encode($pattern_names);?>;
        //console.log("pattern_names_lenght: "+pattern_names.length);
        for (var i=0;i<pattern_names.length;i++){
          var index;
          try
          {
            index = $('#'+i+' img').attr('src').lastIndexOf("/") + 1;
          }
          catch(err) {
            console.log('error: '+err);
            continue;
          }
          var filename = $('#'+i+' img').attr('src').substr(index);
          var filepath = $('#'+i+' img').attr('src').substr(0,index);
          if(filepath.includes('.png')){
            filepath=filepath.split(".png")[1];
          }
          //console.log('filepath: '+filepath);
          //console.log('impact: '+impact);
          filename=filename.split("-SEFFAF-")[0];
          //console.log('filename: '+filename);
          var updated_name="";
          if(!filename.includes('.png')&&impact.length>0)
          {
            updated_name=filepath+filename+'-'+impact;
          }
          else{
            updated_name=filepath+filename;
          }
          if(updated_name.toLowerCase().indexOf('.png')===-1){
            updated_pattern=updated_pattern+"-SILICON-SILICON_BLUE-1.png";
          }
          //console.log('updated_name: '+updated_name);
          $('#'+i+' img').attr('src',updated_name);
        }  
        var updated_pattern=pattern_names[selected_pattern_id].split("-SEFFAF-")[0];
        updated_pattern=updated_pattern.replace("PATTERN-PL1-01","CST003-5");
        //console.log('updated_pattern: '+updated_pattern);
        if($('#hidden_sample_picture').attr('src')!=undefined||$('#text_on_img').val()!="")
        {  
          redraw_canvases($('#'+selected_pattern_id+' img').attr('src'),updated_pattern);
        }
        
        else if(pcanvas_flag==1){
          redraw_canvases($('#'+selected_pattern_id+' img').attr('src'),updated_pattern);
        }
        else{
        $('#pimage').attr('src',json['product_info']['media']);
        $('#pimage1').attr('src',updated_pattern);
        }
        //$('#trimImage').attr ('src', json['product_info']['image']);

        $('#product_image').val(json['product_info']['product_image']);
        $('#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, '&'));

        $('.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 ();

        var __fImageBlackCarouselIndex = 1, __fImageSilverCarouselIndex = 0;
        var counter=0;

        json ['product_info']['images'].forEach (function (Item, Index) {

              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>'
            );

            $('.thumbnails .owl-carousel').owlCarousel ('add', (
              '<div class="ThumbBox mr-20">' +
                '<img class="PP__Image w-100" src="' + Item.popup + '">' +
              '</div>'
            )).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
}
?>

      let attributes = [];
      json.product_info.attribute_groups.forEach(group => {
          group.attribute.forEach(attribute=> {
              attributes.push(attribute.attribute_id);
          });
      });

      $(".description-blocks").empty();
      $.ajax({
          url: 'index.php?route=product/product/getDescriptionBlock',
          dataType: 'json',
          type: 'GET',
          data: { 
              categories : [
                  json.category_id,
                  json.sub_category_id,
                  json.sub_category_id2 
              ], 
              attributes : attributes, 
              product_id : json.product_info.product_id 
          },
          success: function(data){
              data.forEach(content => {
                  $(".description-blocks").append('<div class="description-block">'+content+'</div>');
              });
          }
      });

      }

    });

  }

</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);
        }
      }
    });
  });

  //--></script>

<script>
  jQuery (function ($) {
    $(window).scrollTop (100).scrollTop (0);

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


<!--<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;
    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)
                $.sweetModal({
                  content: response.success,
                  icon: $.sweetModal.ICON_SUCCESS,
                  timeout: 2000
                });
              else if(response.error)
                $.sweetModal({
                  content: response.error,
                  icon: $.sweetModal.ICON_ERROR,
                  timeout: 2000
                });
            }
          });
        });
    });
</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>


<? if (false): ?>
  <!-- PiyerSoft: Intro.js -->
  <link rel="stylesheet" href="//scripts.piyersoft.com/libs/intro/css/introjs.min.css" />
  <script src="//scripts.piyersoft.com/libs/intro/js/intro.min.js"></script>
  <script>
    window.onload = function () {
      setTimeout (function () {
        introJs ()
          .setOption ("tooltipPosition", "auto")
          .setOption ("prevLabel", "Önceki Adım")
          .setOption ("nextLabel", "Sonraki Adım")
          .setOption ("skipLabel", "Geç, Kapat")
          .setOption ("doneLabel", "Anladım, Kapat")
          .start ()
          .oncomplete(function () {
            $("html, body").animate ({ scrollTop: "0" }, 1000); 
          });
      }, 1000);
    };
  </script>
  <!-- PiyerSoft: Intro.js -->
<? endif; ?>

<?php echo $footer; ?>

<input type='hidden' id='fbProductID' value='<?= $product_id ?>' />
<!-- 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 echo $rich_snippets['description']; ?>",
 "sku": "<?php echo $rich_snippets['sku']; ?>",
 <?php if (!empty($rich_snippets['brand'])) { ?>
 "brand":{
   "@type": "Thing",
   "name": "<?php echo $rich_snippets['brand']; ?>"
 },
 <?php } ?>
 <?php if ($rich_snippets['reviewCount'] != 0) { ?>
 "aggregateRating":{
   "@type": "AggregateRating",
   "ratingValue": "<?php echo $rich_snippets['ratingValue']; ?>",
   "ratingCount": "<?php echo $rich_snippets['reviewCount']; ?>",
   "reviewCount": "<?php echo $rich_snippets['reviewCount']; ?>",
   "bestRating": "5",
   "worstRating": "1"
 },
 "review": [<?php echo $rich_snippets['reviews_snippet']; ?>],
 <?php } ?>
 "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 } ?>
   "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 -->
<script>
function sleep(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
   }
function set_canvas(p_img=$('#pimage').attr('src'),p_img1=$('#pimage1').attr('src'))
{
  alert('set_canvas has been called');
  var c = document.getElementById("pcanvas");
  var ctx = c.getContext("2d");
  //ctx.clearRect(0, 0, c.width, c.height);
  var img = new Image();
  //ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
  img.onload = function() {
    ctx.drawImage(img,0,0,480,480 );
  }
  img.src=p_img;
  $('#pimage').hide();
  $('#pcanvas').show();
  
  var c1 = document.getElementById("pcanvas1");
  var ctx1 = c1.getContext("2d");
  ctx1.clearRect(0, 0, c1.width, c1.height);
  var img1 = new Image();
  //ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
  img1.onload = function() {
    ctx1.drawImage(img1,0,0,1056,1920 );
  }
  img1.src=p_img1;
}
 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);
            }
        }
    });
    $(window).load(function () {
    jQuery('#text_on_img').keyup(function() {
    if(pcanvas_flag==0)
    {
      var pattern_names=<?php echo json_encode($pattern_names);?>;
      redraw_canvases($('#'+0+' img').attr('src'),pattern_names[0]);
    }

    
    var c = document.getElementById("pcanvas");
    var ctx = c.getContext("2d");
    ctx.save();
    var font_size="18px";
    var text=$('#text_on_img').val();
    
    if(text.length>15) 
    {
      font_size="17px";
    }
    if(text.length>17){
      font_size="14px";
    }
    if(text.length>20){
      font_size="11px";
    }
    ctx.font = font_size+" besiktas";
    ctx.rotate(16 * Math.PI / 180);
    ctx.fillStyle = "#fff";
    ctx.fillRect(230,221,130,23);
    ctx.fillStyle = "#000";
    ctx.textAlign = "center";
    ctx.fillText(text,300, 235);
    var image = new Image();
    ctx.restore();

    var c1 = document.getElementById("pcanvas1");
    var ctx1 = c1.getContext("2d");
    ctx1.save();
    font_size="38px";
    var text=$('#text_on_img').val();
    if(text.length>16) 
    {
      font_size="42px";
    }
    if(text.length>18){
      font_size="46px";
    }
    if(text.length>20){
      font_size="50px";
    }
    ctx1.font = font_size+" besiktas";
    ctx1.rotate(16 * Math.PI / 180);
    ctx1.fillStyle = "#fff";
    ctx1.fillRect(540,1040,480,65);
    ctx1.fillStyle = "#000";
    ctx1.textAlign = "center";
    ctx1.fillText(text,760, 1080);
    ctx1.restore(); 
    $('#pimage').hide(); 
    }); 
    });
    $(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();

  var file = document.getElementById('custom_image').files[0];
  new Compressor(file, {
             quality: 0.4,
             maxHeight:600,
             maxWidth:600,
             success(result) {
               var formData = new FormData();
               formData.append('custom_image', result, result.name);
              $.ajax({
                    url: "index.php?route=piyerSoft/cases/AjaxUploadimage",
              type: "POST",
              data:  formData,//new FormData(this),
              contentType: false,
                    cache: false,
              processData:false,
              beforeSend : function()
              {
                $('#Loader--9').removeClass ("d-none");
              },

      success: function(json) {
        e.target.value = "";
          if(json['customer_upload_image']){
          var c_upload = document.getElementById("pcanvas");
          var ctx_upload = c_upload.getContext("2d");
          ctx_upload.clearRect(0, 0, c_upload.width, c_upload.height);
          var img_upload = new Image();
          //ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
          img_upload.onload=function(){
          ctx_upload.drawImage(img_upload,0,0,480,480 );
          }
          img_upload.src=$('#pimage').attr('src');
          $('#pcanvas').show();
          $('#pimage').hide();

          var c1_upload = document.getElementById("pcanvas1");
          var ctx1_upload = c1_upload.getContext("2d");
          ctx1_upload.clearRect(0, 0, c1_upload.width, c1_upload.height);
          var img1_upload = document.getElementById("pimage1");
          img1_upload.onload=function(){
          ctx1_upload.drawImage(img1_upload,0,0,1056,1920 );
          }
          img1_upload.src=$('#pimage1').attr('src'); 


            var image_src=json['customer_upload_image'];
            $('#img_canvas').append('<div class="frame"><img style="display:none;" id="sample_picture" src="'+image_src+'"></div>');
            var sweet_width=640;
            var sweet_height=810;
            if($(window).width()<=768){
              sweet_width=sweet_width-200;
              sweet_height=sweet_height-200;
            }
              $.sweetModal({
                  content: "<div class='mid_div'> <div class='outer_cls'><img class='img_container' id='sample_picture1' src='"+image_src+"'></div></div><div class='buttons clearfix'><div class='pull-right'></div></div></div>",
                  width: sweet_width,
                  height:sweet_height,
                  blocking:true,
                  showCloseButton:false,
                  onOpen:function(){
                    setTimeout(() => {  guillotineImage1(image_src); }, 3000);
                  },
                  buttons: {
                  someOtherAction: {
                    label: 'Done',
                    action: function() {
                      set_cropped_img();
                    }
                  },
                }
                });

              $('#button-cart, #button-checkout').removeClass ('disabled d-none');
              $('#Loader--9').addClass ("d-none");

          }else{
            $('#Loader--9').addClass ("d-none");
              //alert(json['error']);
          }
          $('#custom_image').val('');
          },

     error: function (xhr, ajaxOptions, thrownError) {

        $('#Loader--9').addClass ("d-none");

                 alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);

           }
    });
             
  },
    error(err) {
        console.log('E::' + err.message);
    },
  });
    
 }));
});

</script>



<script>
function guillotineImage1(image_src){
var con_width=550;
var con_height=555;
var view_width=416;
var view_height=410;
var zoom_pos="right";
if($( window ).width()<=768){
con_width=con_width-150;
con_height=con_height-150;
view_width=view_width-116;
view_height=view_height-116;
zoom_pos="left";
}
    $('#sample_picture1').cropme({
  // width/height of the image cropper
  "container": {
    "width": con_width,
    "height":con_height
  },

  // shape options
  "viewport": {
    "width": view_width,
    "height":view_height,
    "type": "square", // or 'square'
    "border": {
      "width": 2,
      "enable": true,
      "color": "#fff"
    }
  },

  // zoom options
  "zoom": {
    "enable": true,
    "mouseWheel": true,
    "slider": true
  },

  // rotation options
  "rotation": {
    "slider": true,
    "enable": true,
    "position": zoom_pos,
  },

  // custom CSS class
  //customClass: 'my-custom-class'

  // or 'image'
  transformOrigin: 'viewport'
  
});
  //$("<style>").text("#sample_picture1 { transform:scale(0.8)rotate(0deg); }").appendTo("head");                                           
}
function set_cropped_img(){

  console.log('set_cropped_img called');

// get cropped image
  $('#sample_picture1').cropme('crop', {
  type: 'blob', // or 'blob'
  mimetype: 'image/png',
  quality: 1
}).then(function(res)
{
  
  $("body").append('<img style="display:none;" id="hidden_sample_picture" src="">');
  $('#hidden_sample_picture').attr('src',res);


  var canvas_cropped = document.getElementById("pcanvas");
  var ctx_cropped = canvas_cropped.getContext("2d");
  ctx_cropped.save();
  //ctx.clearRect(0, 0, canvas_cropped.width, canvas_cropped.height);
  var x_pos=203;
  var y_pos=170;
  
  var angle1=16*(Math.PI/180);
  var image_cropped = new Image();
  image_cropped.onload = function() {
    ctx_cropped.translate(x_pos, y_pos);
    ctx_cropped.rotate(angle1);
    ctx_cropped.drawImage(image_cropped,0,0,114,112);
    ctx_cropped.rotate(-angle1);
    ctx_cropped.translate(-x_pos, -y_pos);
  };
  image_cropped.src=res;
  ctx_cropped.restore();

  var canvas1_cropped = document.getElementById("pcanvas1");
  var ctx1_cropped = canvas1_cropped.getContext("2d");
  ctx1_cropped.save();
  //ctx1_cropped.clearRect(0,0,canvas1_cropped.width,canvas1_cropped.height);
  var x_pos1=378;
  var y_pos1=675;
  var image1_cropped = new Image();
  image1_cropped.onload = function() {
    ctx1_cropped.translate(x_pos1, y_pos1);
    ctx1_cropped.rotate(16.1*(Math.PI/180));
    ctx1_cropped.drawImage(image1_cropped,-5,-5,478,477);
    ctx1_cropped.rotate(-(16.1*(Math.PI/180)));
    ctx1_cropped.translate(-x_pos1, -y_pos1);
  };
  image1_cropped.src=res;
  ctx1_cropped.restore();
  $('#sample_picture').attr('src',res);
  $('#sample_picture').hide();

  if($('#text_on_img').val().length>0){
  $('#img_loader').show();
  setTimeout(function(){ $('#text_on_img').keyup();$('#img_loader').hide(); }, 2000);
  }
});
}
</script>



<script>
function redraw_canvases(cover_path,pattern_path){

  console.log('redraw_canvases called');
  console.log(cover_path);
  console.log(pattern_path);

  pcanvas_flag=1;
  $('#pimage1').attr('src',pattern_path);
  $('#pimage').attr('src',cover_path);
  
  //console.log('cover_path: '+cover_path);
  $('#pcanvas').remove();
  $('#pcanvas1').remove();
  $('<canvas id="pcanvas" width="480" height="480" style="display:none"></canvas>').insertAfter($('#pimage'));
  $('#pcanvas1_container').append('<canvas id="pcanvas1" width="1050" height="1920"></canvas>');
  //setTimeout(function()
  //{
    var cc = document.getElementById("pcanvas");
    var ctxx = cc.getContext("2d");
    ctxx.save();
    //ctxx.clearRect(0, 0,cc.width,cc.height);
    var img = new Image();
    //ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
    img.onload=function(){
    ctxx.drawImage(img,0,0,480,480 );
    }
    img.src=cover_path;
    ctxx.restore();
    $('#pcanvas').show();
    $('#pimage').hide();

    var cc1 = document.getElementById("pcanvas1");
    var ctxx1 = cc1.getContext("2d");
    ctxx1.save();
    ctxx1.clearRect(0, 0, cc1.width, cc1.height);
    //ctx1.canvas.width=ctx1.canvas.width;
    var img1 = document.getElementById("pimage1");
    img1.onload=function(){
    ctxx1.drawImage(img1,0,0,1056,1920);
    }
    img1.src=pattern_path;
    ctxx1.restore();
    //$('#pcanvas1').show();
    //}, 2000);
    //
  if($('#hidden_sample_picture').attr('src')!=undefined)
  {
    setTimeout(function()
    {
      $('#img_loader').show();
      var res=$('#hidden_sample_picture').attr('src');   
      var canvas11 = document.getElementById("pcanvas");
      var ctx11 = canvas11.getContext("2d");
      ctx11.save();
      //ctx11.clearRect(0,0,canvas11.width,canvas11.height);
      var x_pos=203;
      var y_pos=170;
      var angle1=16*(Math.PI/180);
      var image11 = new Image();
      image11.onload = function() {  
      ctx11.translate(x_pos, y_pos); 
      ctx11.rotate(angle1);
      ctx11.drawImage(image11,0,0,114,112);
      ctx11.rotate(-angle1);
      ctx11.translate(-x_pos, -y_pos); 
      };
      image11.src=res;
      ctx11.restore();
      
      var canvas12 = document.getElementById("pcanvas1");
      var ctx12 = canvas12.getContext("2d");
      ctx12.save();
      //ctx1.clearRect(0,0,canvas12.width,canvas12.height);
      var x_pos1=374;
      var y_pos1=669;
      var angle1=16*(Math.PI/180);
      var image12 = new Image();
      image12.onload = function() {
      ctx12.translate(x_pos1, y_pos1); 
      ctx12.rotate(angle1);
      ctx12.drawImage(image12,0,0,478,477);
      ctx12.rotate(-angle1);
      ctx12.translate(-x_pos1, -y_pos1); 
      };
      image12.src=res;
      ctx12.restore();
      $('#img_loader').hide();
    }, 3000);
  }


  if($('#text_on_img').val().length>0){
  $('#img_loader').show();
  setTimeout(function(){ $('#text_on_img').keyup();$('#img_loader').hide(); }, 4000);
  }
}
$(document).ready(function (e) {
  $(".styling").on('click',(function(e) {
    $("html, body").animate ({scrollTop: 0}, 300);
     selected_pattern_id=$(this).attr('id');
     var pattern_names=<?php echo json_encode($pattern_names);?>;
     var cover_names=<?php echo json_encode($cover_names);?>;
     redraw_canvases($('#'+selected_pattern_id+' img').attr('src'),pattern_names[$(this).attr('id')]);     
   }));
 });
</script>

<script>
    function upload() {

      console.log('upload called');

        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 b64toBlob(b64Data, contentType, sliceSize) {
        contentType = contentType || '';
        sliceSize = sliceSize || 512;

        var byteCharacters = atob(b64Data);
        var byteArrays = [];

        for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
            var slice = byteCharacters.slice(offset, offset + sliceSize);

            var byteNumbers = new Array(slice.length);
            for (var i = 0; i < slice.length; i++) {
                byteNumbers[i] = slice.charCodeAt(i);
            }

            var byteArray = new Uint8Array(byteNumbers);

            byteArrays.push(byteArray);
        }

      var blob = new Blob(byteArrays, {type: contentType});
      return blob;
}
function addcustomimage(ButtonID){
    var canvas = document.getElementById('pcanvas');
    var ctx = canvas.getContext('2d');
    
    $('#pimage').attr('src',canvas.toDataURL());
    $('#pcanvas').hide();
    $('#pimage').show();

    $('#pcanvas1').hide();
    var canvas1 = document.getElementById('pcanvas1');
    var ctx1 = canvas1.getContext('2d');
    
    $('#pimage1').attr('src',canvas1.toDataURL());
    //$('#pimage1').show();
    $('#pimage1').css({'width':'500px','height':'auto'});
    $('#img_loader').show();
    var a=canvas1.toDataURL();
    var c=canvas.toDataURL();
    var block = a.split(";");
    var a_type=block[0].split(":")[1];
    var a_data=block[1].split(",")[1];

    block = c.split(";");
    var c_type=block[0].split(":")[1];
    var c_data=block[1].split(",")[1];
 
    var a_blob = b64toBlob(a_data, a_type);
    var c_blob = b64toBlob(c_data, c_type);

    var formDataToUpload = new FormData(form);
    formDataToUpload.append("a_image", a_blob);
    formDataToUpload.append("c_image", c_blob);
    
    var form = document.getElementById("myAwesomeForm");
      $.ajax({
            url: 'index.php?route=product/product/writeImg',
            data: formDataToUpload,
            type:"POST",
            contentType:false,
            processData:false,
            cache:false,
            dataType:"json",
            success: function (b_id) 
            {
              // 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ükleyin');
                  return false;
              }
              var picture = $('#pimage');
              event.preventDefault();
              if (picture.guillotine('instance')) picture.guillotine('remove');
              picture.guillotine({width: 250, height: 600});
              var data = picture.guillotine('getData');
              data.x=0;
              data.scale=0.3;
              $.ajax({
                  url: 'index.php?route=checkout/cart/add',
                  type: 'post',
                  data: {customcaseimage:b_id.id, product_id: product_id, quantity: quantity,p_11_pattern_img:b_id.id},
                  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) 
                    {
                      $.sweetModal({
                        content: responce.success,
                        icon: $.sweetModal.ICON_SUCCESS,
                        timeout: 2000,
                        onClose:function(){
                        window.location.href = window.location.origin+'/odeme';
                        }
                      });
                    
                      if (responce.text_items_only) $('#cart-total').text(responce.text_items_only);
                    }
                    else
                    {
                          for (e in responce.error.option)
                          $.sweetModal({
                          content: responce.error.option [e],
                          icon: $.sweetModal.ICON_ERROR,
                          timeout: 2000
                          });
                    }
                  },
                  error: function (xhr, ajaxOptions, thrownError) {
                      alert('add error');
                      $('#img_loader').hide();
                      alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                  }
              });
            
            },
            error: function (xhr, ajaxOptions, thrownError) {
            $('#img_loader').hide();
            alert('Error occured in write_img');
            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            }
          });          

}
</script>