<?php
if ($product_info['product_type'] == 6) {
    ?>
<style>
    @media (min-width: 768px)
    {
        #CustomizationText--Second{
            bottom:85px;
        }
    }
    @media (max-width: 768px)
    {
        #CustomizationText--Second{
            bottom:55px;
        }
        #CustomizationText--Second._wah-500 {
            bottom:70px;
        }
    }
    #CustomizationText--Second {
        overflow: hidden;
        text-align: center;
        position: absolute;
        font-size: 1px;
        color: #000;
    }
    CustomizationText--Second.TextColor--000000{color:#000}#CustomizationText--Second.TextColor--FFFFFF{color:#fff}#CustomizationText--Second.TextColor--5F4D80{color:#5f4d80}#CustomizationText--Second.TextColor--133168{color:#133168}#CustomizationText--Second.TextColor--FFC3D0{color:#ffc3d0}#CustomizationText--Second.TextColor--FF43A5{color:#ff43a5}#CustomizationText--Second.TextColor--FA6827{color:#fa6827}#CustomizationText--Second.TextColor--F4CE11{color:#f4ce11}#CustomizationText--Second.TextColor--F8F4CA{color:#f8f4ca}#CustomizationText--Second.TextColor--B8DEC6{color:#b8dec6}#CustomizationText--Second.TextColor--CAE8EA{color:#cae8ea}#CustomizationText--Second.TextColor--C8AFD5{color:#c8afd5}#CustomizationText--Second.TextFont--Glitter{font-family:Glitter}#CustomizationText--Second.TextFont--RobotoMono, #CustomizationText--Second.TextFont--Runway {width: 200px;}#CustomizationText--Second.TextFont--RobotoMono{font-family:RobotoMono}#CustomizationText--Second.TextFont--Runway{font-family:Runway}
</style>
<?php
}
if ($product_info['product_type'] == 7) {
    ?>
    <div class="text-center">
        <div class="col-xs-9 col-sm-10" style="padding: 0;">
            <div id="personal">
                <div id="personal_case" contenteditable="false">
                    <img  width="236" src="<?php echo $product_info['image'] ?>" style="margin-left: -5px;margin-top: -7px;">
                </div>
                <div class="frame">
                    <img id="sample_picture" src="<?= (isset($customer_upload_image) ? $customer_upload_image : '') ?>">
                </div>
            </div>
        </div>
        <div class="col-xs-3 col-sm-2" style="margin-left: -15px; padding: 0;">
            <ul id="data" style="display:none">
                <li><input name="x" id="x"></li>
                <li><input name="y" id="y"></li>
                <li><input name="w" id="w"></li>
                <li><input name="h" id="h"></li>
                <li><input name="scale" id="scale"></li>
                <li><input name="angle" id="angle"></li>
                <li><input name="zoomfactor" value="0" id="zoomfactor"></li>
            </ul>
            <div id="controls" class="">
                <a id="rotate_left" title="Rotate left"><i class="fa fa-rotate-left"></i></a>
                <a id="zoom_out" title="Zoom out"><i class="fa fa-search-minus"></i></a>
                <a id="fit" title="Fit image"><i class="fa fa-arrows-alt"></i></a>
                <a id="zoom_in" title="Zoom in"><i class="fa fa-search-plus"></i></a>
                <a id="rotate_right" title="Rotate right"><i class="fa fa-rotate-right"></i></a>
            </div>
        </div>
        <div class="clearfix visible-xs"></div>
    </div>
    <?php
} else {
if ($product_info['product_type'] == 1)
        preg_match('/(SEFFAF_SAYDAM-SILVER|SEFFAF_SAYDAM-BLACK)/', $product_info['thumb'], $__fImage);
    else
        $__fImage = false;
    ?>
<?php if ($__fImage && $__fImage [0]): ?>
        <div class="fImage__Colors">
            <button class="fImage__Color fImage__Color--BLACK" onclick="$('.thumbnails > .owl-carousel').addClass('d-none');
                    $('.fImage__BLACK--Carousel').removeClass('d-none');
                    $('.fImage__SILVER').hide();
                    $('.fImage__BLACK').show();
                    $('#CustomizationText').appendTo('.fImage__BLACK--Carousel .ThumbBox--Customization');
                    $('#product_image').val($('#product_image--BLACK').val());"></button>
            <button class="fImage__Color fImage__Color--SILVER" onclick="$('.thumbnails > .owl-carousel').addClass('d-none');
                    $('.fImage__SILVER--Carousel').removeClass('d-none');
                    $('.fImage__BLACK').hide();
                    $('.fImage__SILVER').show();
                    $('#CustomizationText').appendTo('.fImage__SILVER--Carousel .ThumbBox--Customization');
                    $('#product_image').val($('#product_image--SILVER').val());"></button>
        </div>
    <?php endif; ?>
<ul class="thumbnails">
<?php if ($__fImage && $__fImage [0]): ?>
            <li class="fImage__BLACK--Carousel owl-carousel custom-0008">
                <div class="ThumbBox--Customization" id="img_canvas">
                    <div id="canvas_media"></div>
                    <?php if ($product_info['product_type'] == 4): ?>
                        <img class="Second_Layer" src="" title="" alt="" />
                    <?php endif; ?>
                    <div id="CustomizationText" class="TextFont--Glitter <?= ($product_info['product_type'] != 4) ? 'TextPosition--Bottom' : 'TextPosition--Horizontal'; ?>"></div>
<?php if ($product_info['product_type'] == 6): ?>
                        <div id="CustomizationText--Second" class="TextFont--Glitter"></div>
                    <?php endif; ?>
<input type="hidden" name="product_image--BLACK" id="product_image--BLACK" value="" />
                </div>
            </li>
            <li class="fImage__SILVER--Carousel d-none owl-carousel custom-0008">
                <div class="ThumbBox--Customization" id="img_canvas">
                    <div id="canvas_media"></div>
                    <?php if ($product_info['product_type'] == 4): ?>
                        <img class="Second_Layer" src="" title="" alt="" />
                    <?php endif; ?>
<input type="hidden" name="product_image--SILVER" id="product_image--SILVER" value="" />
                </div>
            </li>
        <?php else: ?>
            <li class="owl-carousel custom-0008">
                <div class="ThumbBox--Customization" id="img_canvas">
                    <div id="canvas_media">
                        <?php if ($product_info['product_type'] == 0): ?>
                            <img id="pimage" src="<?= $product_info['popup']; ?>" width="500">
                        <?php endif; ?>
                    </div>
<?php if ($product_info['product_type'] == 4): ?>
                        <img class="Second_Layer" src="" title="" alt="" />
                    <?php endif; ?>
<div id="CustomizationText" class="TextFont--Glitter <?= ($product_info['product_type'] != 4) ? 'TextPosition--Bottom' : 'TextPosition--Horizontal'; ?>"></div>
<?php if ($product_info['product_type'] == 6): ?>
                        <div id="CustomizationText--Second" class="TextFont--Glitter"></div>
                    <?php endif; ?>
                </div>
                <!--<?php foreach ($product_info['images'] as $image): ?>
                                                                                                                                                                                              <div class="ThumbBox mr-20">
                                                                                                                                                                                                <img class="PP__Image w-100" src="<?= $image['popup']; ?>" />
                                                                                                                                                                                              </div>
                <?php endforeach; ?>-->
            </li>
        <?php endif; ?>
<div class="clearfix hidden-xs"></div>
        <br class="hidden-xs" />
<?php if ($__fImage && $__fImage [0]): ?>
            <li class="fImage__<?= ($__fImage [0] == 'SEFFAF_SAYDAM-BLACK') ? 'BLACK' : 'SILVER'; ?> image-additional hidden-xs">
                <a class="thumbnail border-0" href="javascript: $('.thumbnails > .owl-carousel.fImage__BLACK--Carousel').trigger ('to.owl', [0, 300]);">
                    <img src="<?= $product_info['thumb']; ?>" data-src="<?= $product_info['popup']; ?>" />
                </a>
            </li>
        <?php else: ?>
            <li class="image-additional hidden-xs">
                <a class="thumbnail border-0" href="javascript: $('.thumbnails > .owl-carousel').trigger ('to.owl', [0, 300]);">
                    <img src="<?= $product_info['thumb']; ?>" data-src="<?= $product_info['popup']; ?>" />
                </a>
            </li>
        <?php endif; ?>
        <?php foreach ($product_info['images'] as $index => $image): ?>
            <?php
            if ($product_info['product_type'] == 1)
                preg_match('/(SEFFAF_SAYDAM-SILVER|SEFFAF_SAYDAM-BLACK)/', $image ['thumb'], $__fImage);
            else
                $__fImage = false;
            ?>
            <?php if ($__fImage && $__fImage [0]): ?>
                <?php
                $__fImageBlackCarouselIndex = 0;
                $__fImageSilverCarouselIndex = 0;
                ?>
                <?php if ($__fImage [0] == "SEFFAF_SAYDAM-BLACK"): ?>
                    <li class="fImage__BLACK image-additional hidden-xs">
                        <a class="thumbnail border-0" href="javascript: $('.thumbnails > .owl-carousel.fImage__BLACK--Carousel').trigger ('to.owl', [<?= $__fImageBlackCarouselIndex++; ?>, 300]);">
                            <img src="<?= $image['thumb']; ?>" data-src="<?= $image['popup']; ?>" />
                        </a>
                    </li>
                <?php elseif ($__fImage [0] == "SEFFAF_SAYDAM-SILVER"): ?>
                    <li class="fImage__SILVER image-additional hidden-xs">
                        <a class="thumbnail border-0" href="javascript: $('.thumbnails > .owl-carousel.fImage__SILVER--Carousel').trigger ('to.owl', [<?= $__fImageSilverCarouselIndex++; ?>, 300]);">
                            <img src="<?= $image['thumb']; ?>" data-src="<?= $image['popup']; ?>" />
                        </a>
                    </li>
                <?php else: ?>
                <?php endif; ?>
            <?php else: ?>
                <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 endif; ?>
        <?php endforeach; ?>
</ul>
<script>
        jQuery(function ($) {
            $('.thumbnails > .owl-carousel').owlCarousel({
                items: 1,
                pagination: true
            });
        });
    </script>
<script>
        jQuery(function ($) {
            $('.thumbnails').bind('contextmenu', function (e) {
                return false;
            });
        });
if ($('#customizeColor').val() != '') {
$('#CustomizationText')
                    .removeClass(function (index, className) {
                        return (className.match(/(^|\s)TextColor--\S+/g) || []).join(' ');
                    })
                    .addClass('TextColor--' + $('#customizeColor').val());
$('.PP__CustomizationTextColor--Active').removeClass('PP__CustomizationTextColor--Active');
            $(this).addClass('PP__CustomizationTextColor--Active');
        }
if ($('#customizeFont').val() != '') {
            $('#CustomizationText')
                    .removeClass(function (index, className) {
                        return (className.match(/(^|\s)TextFont--\S+/g) || []).join(' ');
                    })
                    .addClass('TextFont--' + $('#customizeFont').val());
            $('.PP__CustomizationTextFont--Active').removeClass('PP__CustomizationTextFont--Active');
            $(this).addClass('PP__CustomizationTextFont--Active');
}
        if ($('#customizetextPosition').val() != '') {
            $('#CustomizationText')
                    .removeClass(function (index, className) {
                        return (className.match(/(^|\s)TextPosition--\S+/g) || []).join(' ');
                    })
                    .addClass('TextPosition--' + $('#customizetextPosition').val());
            $('.PP__CustomizationTextInput').trigger('keyup');
        }
</script>
    <?php
}
?>
