<?php echo $header; ?>
<style>
    .uploader {
        display: block;
        margin: 0 auto;
    }
.uploader__input {
        display: none;
    }
.uploader__label {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        padding: 2em 1.5em;
        text-align: center;
        background: #fff;
        border-radius: 7px;
        border: 3px solid #eee;
        transition: all .2s ease;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
        background-position: 0 0, 15px 15px;
        background-size: 30px 30px;
    }
    .uploader__label:hover {
        border-color: #454cad;
    }
    .uploader__label.hover {
        border: 3px solid #454cad;
        box-shadow: inset 0 0 0 6px #eee;
        background-color: #616161;
        background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0);
    }
    .uploader__label.hover .uploader__clipalt {
        stroke: #fff;
    }
.uploader__wrapper {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
.uploader__file {
        position: absolute;
        left: 0.5em;
        top: 0em;
        display: block;
        width: 3em;
        height: 3em;
        border-radius: 50%;
        z-index: 1;
        opacity: 0;
        -webkit-transform: translate3d(0, -1em, 0) scale(0);
        transform: translate3d(0, -1em, 0) scale(0);
        transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1);
    }
    .uploader__file.show {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0) scale(1);
        transform: translate3d(0, 0, 0) scale(1);
    }
.uploader__clipalt {
        fill: none;
        stroke: #ccc;
        stroke-width: 5px;
        stroke-miterlimit: 10;
    }
.uploader__clip {
        stroke-dasharray: 391.592px;
        stroke-dashoffset: -391.592px;
        fill: none;
        stroke: #333;
        stroke-width: 5px;
        stroke-miterlimit: 10;
    }
    .uploading .uploader__clip {
        transition: all .5s linear;
    }
</style>
<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>
<div class="container">
    <div class="row"><?php echo $column_left; ?>
        <?php if ($column_left && $column_right) { ?>
            <?php $class = 'col-sm-6'; ?>
        <?php } elseif ($column_left || $column_right) { ?>
            <?php $class = 'col-sm-9'; ?>
        <?php } else { ?>
            <?php $class = 'col-sm-12'; ?>
        <?php } ?>
<br />
        <div id="content" class="<?php echo $class; ?> category-page"><?php echo $content_top; ?>
            <div class="row">
<?php if ($sub_category_id): ?>
                    <div class="col-xs-12 col-md-5 text-center">
                        <div>
                            <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 $personal_case_image ?>" style="margin-left: -5px;margin-top: -7px;">
                                    </div>
                                    <div class="frame">
                                        <img id="sample_picture" src="<?php echo $customer_upload_image ?>">
                                    </div>
</div>
                                <input type="hidden" id="order_img">
                            </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>
                    </div>
                <?php endif; ?>
                <div class="clearfix visible-xs"></div>
                <div class="<?= ($sub_category_id) ? 'col-sm-5 col-sm-push-1' : 'col-sm-4 col-sm-push-4'; ?>" style=>
                    <h1 class="mt-0 mb-3 PP__Title">Kendi Kılıfını Tasarla</h1>
                    <ul class="list-unstyled">
                        <li><h3 class="d-inline PP__Price">39,90₺</h3></li>
                    </ul>
                    <form id="filterform" method="get">
                        <?php if ($all_categories) { ?>
                            <label class="PP__OptionTitle">Telefon Modelini Seçiniz</label>
                            <select class="CategorySelectbox ml-0 custom-0002" id="brand" onchange="getsubcategories(this.value)">
                                <option value="" >Marka</option>
                                <?php
                                foreach ($all_categories as $category) {
                                if($category['category_id']!='2688'){
                                    $brand_name = str_replace('Telefon Kılıfı', '', $category['name']);
                                    ?>
                                    <option value="<?= $category['category_id']; ?>" <?php echo ($category_id == $category['category_id'] ? 'selected' : '') ?>><?= $brand_name; ?></option>
<?php
                                }
                                }
                                ?>
                            </select>
                            <div class="CategorySelectbox__Appearance">
                                <i class="CategorySelectbox__AppearanceIcon fa fa-chevron-down"></i>
                            </div>
                            <?php
                        }
                        ?>
<select class="CategorySelectbox custom-0002" id="model" onchange="FilterForm(this.value)" >
                            <option value="">Model</option>
                            <?php
                            if ($sub_categories) {
                                foreach ($sub_categories as $category) {
                                    $model_name = str_replace('Telefon Kılıfı', '', $category['name']);
                                    ?>
                                    <option value="<?= $category['category_id']; ?>" <?php echo ($sub_category_id == $category['category_id'] ? 'selected' : '') ?>><?= $model_name; ?></option>
                                    <?php
                                }
                            }
                            ?>
                        </select>
<div class="CategorySelectbox__Appearance">
                            <i class="CategorySelectbox__AppearanceIcon fa fa-chevron-down"></i>
                        </div>
                    </form>
                    <?php
                    if ($sub_category_id) {
                        $url = $_SERVER['PHP_SELF'] . '?' . $_SERVER['QUERY_STRING'];
                        ?>
                        <label class="PP__OptionTitle">Fotoğraf Yükleyin</label>
                        <div>
                            <form method="post" enctype="multipart/form-data" action="<?php echo htmlspecialchars($url, ENT_QUOTES, 'utf-8') ?>" class="uploader">
                                <input class="uploader__input d-none" id="custom_image" type="file" name="custom_image" accept="image/*" />
                                <label class="uploader__label" for="custom_image">
                                    <div class="uploader__wrapper">
                                        <img class="uploader__file hidden" src="#" alt="">
                                        <svg class="uploader__svg" xmlns="http://www.w3.org/2000/svg" width="98px" height="90px" viewBox="0 0 98 90">
                                        <path class="uploader__clipalt" d="M47.559,12.453L9.966,50.05 c0,0-16.188,15.611-0.892,30.908c15.297,15.301,30.995-0.804,30.995-0.804l50.666-50.669c0,0,10.814-10.891-0.268-21.981 c-11.087-11.088-21.97-0.288-21.97-0.288L24.221,51.486c0,0-10.736,8.541-2.432,16.921c8.307,8.384,16.832-2.521,16.832-2.521 l32.535-32.531"/>
                                        <path class="uploader__clip" d="M47.559,12.453L9.966,50.05 c0,0-16.188,15.611-0.892,30.908c15.297,15.301,30.995-0.804,30.995-0.804l50.666-50.669c0,0,10.814-10.891-0.268-21.981 c-11.087-11.088-21.97-0.288-21.97-0.288L24.221,51.486c0,0-10.736,8.541-2.432,16.921c8.307,8.384,16.832-2.521,16.832-2.521 l32.535-32.531"/>
                                        </svg>
                                    </div>
                                </label>
                            </form>
                            <br>
</div>
                        <?php
                    }
                    ?>
<div class="form-group d-none">
                        <label class="control-label" for="input-quantity"><?php echo $entry_qty; ?></label>
                        <input type="number" name="quantity" value="<?php echo $minimum; ?>" size="2" id="input-quantity" class="form-control" />
                    </div>
<?php if ($sub_category_id): ?>
                        <?php if ($customer_upload_image) { ?>
                            <button type="button" id="button-cart" data-loading-text="<?php echo $text_loading; ?>" class="PP__Button btn btn-primary btn-lg"><?php echo $button_cart; ?></button>
                            <button type="button" id="button-checkout" data-loading-text="<?php echo $text_loading; ?>" class="PP__Button PP__Button--Green btn btn-primary btn-lg px-15 pull-right"><?= $text_buynow; ?></button>
                        <?php } else { ?>
                            <button type="button" id="button-cart" data-loading-text="<?php echo $text_loading; ?>" class="PP__Button btn btn-primary btn-lg disabled" disabled="disabled"><?php echo $button_cart; ?></button>
                            <button type="button" id="button-checkout" data-loading-text="<?php echo $text_loading; ?>" class="PP__Button PP__Button--Green btn btn-primary btn-lg px-15 pull-right disabled" disabled="disabled"><?= $text_buynow; ?></button>
                        <?php } ?>
                    <?php endif; ?>
</div>
            </div>
            <?php echo $content_bottom; ?>
        </div>
        <?php echo $column_right; ?></div>
</div>
<?php echo $footer; ?>
<script>
    $('#button-cart').on('click', function () {
        var image = $('#sample_picture').attr('src');
        var zoomfactor = $('#zoomfactor').val();
        var picture = $('#sample_picture');
        var data = picture.guillotine('getData');
$.ajax({
            url: 'index.php?route=piyerSoft/cases/generatecustomcase',
            type: 'post',
            data: {image: image, zoomfactor: zoomfactor, data: data},
            dataType: 'json',
            beforeSend: function () {
                $('#button-cart').button('loading');
            },
            complete: function () {
                $('#button-cart').button('reset');
            },
            success: function (res) {
                var image = '';
                if (res.responce == 'success') {
                    image = res.file;
$('#img_preview').show();
                }
                var brand = $('#brand :selected').text().trim();
                var model = $('#model :selected').text().trim();
                var quantity = $('#input-quantity').val();
                $('#model,#brand').css('border', 'solid 1px #ccc');
                var error = false;
if ($('#model').val() == '') {
                    $('.breadcrumb').after('<div class="alert alert-success">L�tfen Model Se�iniz <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
                    $('#model').css('border', 'solid 1px red');
                    error = true;
                }
                if ($('#brand').val() == '') {
                    $('.breadcrumb').after('<div class="alert alert-success">L�tfen marka Se�iniz <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
                    $('#brand').css('border', 'solid 1px red');
                    error = true;
                }
                if (error == false) {
                    $.ajax({
                        url: 'index.php?route=checkout/cart/add',
                        type: 'post',
                        data: {customcaseimage: image, brand: brand, model: model, product_id: 5134, quantity: quantity},
                        dataType: 'json',
                        beforeSend: function () {
                            $('#button-cart').button('loading');
                        },
                        complete: function () {
                            $('#button-cart').button('reset');
                            // $('#img_loader').hide();
                        },
                        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('_', '-'));
                                        alert(json['error']['option'][i]);
                                        // 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>');
                                        //    }
                                    }
                                }
// 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>
    function getsubcategories(id) {
$.ajax({
            url: '<?php echo HTTPS_SERVER ?>index.php?route=piyerSoft/cases/getsubcategories',
            type: 'post',
            data: {category_id: id},
            success: function (res) {
                $('#model').html(res);
            }
        });
    }
</script>
<script>
    function FilterForm(id) {
if (id != '') {
            var brand = $("#brand option:selected").text().trim();
            var model = $('#model option:selected').val();
            location.href = '<?php echo $form_action ?>' + '&brand=' + brand + '&model=' + model;
        }
    }
</script>
<script>
jQuery(function () {
        var picture = $('#sample_picture');
        picture.hide();
        picture.on('load', function () {
            // Initialize plugin (with custom event)
            picture.guillotine({eventOnChange: 'guillotinechange'});
            picture.show();
            // Display inital data
            var data = picture.guillotine('getData');
            for (var key in data) {
                $('#' + key).val(data[key]);
            }
// Bind button actions
            $('#rotate_left').click(function () {
                picture.guillotine('rotateLeft');
            });
            $('#rotate_right').click(function () {
                picture.guillotine('rotateRight');
            });
            $('#fit').click(function () {
                picture.guillotine('fit');
                $('#zoomfactor').val(0);
            });
            $('#zoom_in').click(function () {
                picture.guillotine('zoomIn');
                $('#zoomfactor').val(Number($('#zoomfactor').val()) + 1);
            });
            $('#zoom_out').click(function () {
                picture.guillotine('zoomOut');
                var zoomfactor = $('#zoomfactor').val();
                if (zoomfactor != 0)
                    --zoomfactor;
                $('#zoomfactor').val(zoomfactor);
            });
            picture.guillotine('fit');
            data.scale = parseFloat(data.scale.toFixed(4));
            for (var k in data) {
                $('#' + k).val(data[k]);
            }
// Update data on change
            picture.on('guillotinechange', function (ev, data, action) {
                data.scale = parseFloat(data.scale.toFixed(4));
                for (var k in data) {
                    $('#' + k).val(data[k]);
                }
            });
        }).each(function () {
            if (this.complete)
                $(this).load();
        });
    });
</script>
<script src="catalog/view/theme/deercase/stylesheet/guillotine/jquery.guillotine.js" type="text/javascript"></script>
<script>
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);
            }
        }
    });
</script>
<script>
    function upload() {
var percentage = null,
                clippaper = document.querySelector('.uploader__clip'),
                clippaperLength = clippaper.getTotalLength();
        clippaper.style.strokeDasharray = clippaperLength;
        clippaper.style.strokeDashoffset = -clippaperLength;
function Init() {
var fileSelect = document.querySelector('.uploader__input'),
                    fileDrag = document.querySelector('.uploader__label'),
                    fileSize = null;
fileSelect.addEventListener('change', fileSelectHandler, false);
// Is XHR2 available?
            var xhr = new XMLHttpRequest();
            if (xhr.upload) {
                // File Drop
                fileDrag.addEventListener('dragover', fileDragHover, false);
                fileDrag.addEventListener('dragleave', fileDragHover, false);
                fileDrag.addEventListener('drop', fileSelectHandler, false);
            }
        }
function fileDragHover(e) {
            var fileDrag = document.querySelector('.uploader__label');
e.stopPropagation();
            e.preventDefault();
fileDrag.className = (e.type === 'dragover' ? 'uploader__label hover' : 'uploader__label');
        }
function fileSelectHandler(e) {
document.querySelector('.uploader').classList.add('uploading');
// Fetch FileList object
            var files = e.target.files || e.dataTransfer.files;
// Cancel event and hover styling
            fileDragHover(e);
// Process all File objects
            for (var i = 0, f; f = files[i]; i++) {
                parseFile(f);
                uploadFile(f);
            }
        }
function parseFile(file) {
// console.log(file.name);
var imageName = file.name;
var isGood = (/\.(?=gif|jpg|png|jpeg)/gi).test(imageName);
            if (isGood) {
                // Thumbnail Preview
                document.querySelector('.uploader__file').src = URL.createObjectURL(file);
            } else {
                document.querySelector('.uploader').reset();
            }
        }
function updateFileProgress(e) {
if (e.lengthComputable) {
                percentage = (e.loaded / fileSize) * 100;
                clippaper.style.strokeDashoffset = (-clippaperLength + (percentage * clippaperLength) / 100);
if (e.loaded === fileSize) {
                    document.querySelector('.uploader__file').classList.add("show");
                }
            }
        }
function uploadFile(file) {
fileSize = file.size;
var xhr = new XMLHttpRequest(),
                    fileSizeLimit = 1024; // In MB
            if (xhr.upload) {
                // Check if file is less than x MB
                if (file.size <= fileSizeLimit * 1024 * 1024) {
                    // Progress bar
                    xhr.upload.addEventListener('progress', updateFileProgress, false);
// File received / failed
                    xhr.onreadystatechange = function (e) {
                        if (xhr.readyState == 4) {
                            // Everything is good!
// progress.className = (xhr.status == 200 ? "success" : "failure");
                            // document.location.reload(true);
                        }
                    };
// Start upload
                    xhr.open('POST', document.querySelector('.uploader').action, true);
                    xhr.setRequestHeader('X-File-Name', file.name);
                    xhr.setRequestHeader('X-File-Size', file.size);
                    xhr.setRequestHeader('Content-Type', 'multipart/form-data');
                    xhr.send(file);
                } else {
                    console.log('Lütfen (' + fileSizeLimit + ' MB)\'dan küçük bir fotoğraf yükleyin');
                }
            }
        }
// Check for the various File API support.
        if (window.File && window.FileList && window.FileReader) {
            Init();
        } else {
            document.querySelector('.uploader__labele').style.display = 'none';
        }
    }
    upload();
</script>