<?php
$this->css(
    [
        $this->assetModule('script/admin.css'),
        $this->assetModule('script/jquery.Jcrop.min.css'),
    ]
);
$this->jQuery('extension/fileupload-min.js');
$this->Backbone();
$this->js([
    $this->assetModule('script/ajax-upload-min.js'),
    $this->assetModule('script/jquery.Jcrop.min.js'),
]);
?>

<?php include $this->template('./message-box.phtml'); ?>

<div id="pi-js-upload">
    <?php include $this->templateComponent('form'); ?>

    <script id="template-upload" type="text/template">
        <div>
            <div id="author-image" class="upload-image-bg">
                <?php $src = $form->get('photo')->getValue(); ?>
                <?php if ($src) { ?>
                    <div class="black-bg">
                        <button type="button" class="close js-close">&times;</button>
                    </div>
                    <img src="<?php echo Pi::url($src); ?>">
                <?php } else { ?>
                    <span class="fas fa-user"></span>
                <?php } ?>
            </div>
            <span class="btn btn-secondary upload fileinput-button" data-toggle="modal" href="#upload-box">
                <?php echo _a('Upload'); ?>
            </span>
        </div>
    </script>

    <div id="upload-box" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Header -->
                <div class="modal-header">
                    <h3 class="modal-title" id="modal-header"><?php echo _a('Modify Photo'); ?></h3>
                    <button id="photo-close" type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                    </button>
                </div>
                <!-- Body -->
                <div class="modal-body" style="height: 330px">
                    <div class="article-uploaded-box">
                        <div class="article-upload-hit">
                            <input class="btn article-add-photo" type="button" value="<?php echo _a('Upload'); ?>"
                                   style="width: 110px;">
                            <div class="muted" style="margin-top: 10px; font-size: 12px;">
                                <?php echo sprintf(_a('Format supported: %s'), $configs['image_extension']); ?>
                                (<?php echo $this->escape($configs['max_media_size']); ?>)
                            </div>
                        </div>
                        <img class="hide article-upload-image">
                    </div>
                    <div class="article-preview">
                        <div class="preview-desc"><?php echo _a('Please make sure your photo is clearly.'); ?></div>
                        <div class="article-preview-photo"
                             style="width: <?php echo $this->escape($configs['author_size']); ?>px; height: <?php echo $this->escape($configs['author_size']); ?>px">
                            <img src="<?php echo $src ? Pi::url($src) : ''; ?>"
                                 class="<?php echo $src ? '' : 'hide'; ?>" style="max-width: none">
                            <span class="fas fa-user<?php echo $src ? ' hide' : ''; ?>"></span>
                        </div>
                        <div class="preview-desc-size muted"><?php echo _a('Size: ') . $this->escape($configs['author_size']) . '×' . $this->escape($configs['author_size']) . 'px'; ?></div>
                    </div>
                    <input name="photo-url" type="hidden">
                </div>
                <!-- Footer -->
                <div class="modal-footer">
                    <button id="photo-cancel" class="btn" disabled><?php echo _a('Cancel'); ?></button>
                    <button id="photo-process" class="btn btn-primary" data-dismiss="modal"
                            disabled><?php echo _a('Yes'); ?></button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var jcrop_api;
    var page = {
        id: function () {
            return "<?php echo $form->get('id')->getValue()
                ? 'id/' . $form->get('id')->getValue()
                : 'fake_id/' . $form->get('fake_id')->getValue(); ?>";
        },
        resizeFakeId: '<?php echo uniqid(); ?>',
        el: $('#pi-js-upload'),
        $: function (selector) {
            return this.el.find(selector);
        },
        size: '<?php echo $this->escape($configs['author_size']); ?>',
        savedPhoto: '',
        format: function () {
            var format = '<?php echo $configs['image_extension']; ?>';
            var data = new Array();
            data = format.split(',');
            return data;
        },
        template: _.template('<div class="black-bg">'
            + '<button type="button" class="author close js-close">&times;</button></div>'
            + '<img src="<%=preview_url %>">'
        ),
        events: function () {
            $('#photo-process').click(this.savePhoto.bind(this));
            $('#photo-cancel').click(this.cancelUpload.bind(this));

        },
        init: function () {
            page.$("[name=placeholder]")
                .parents(".form-group:first")
                .html($("#template-upload").html());

            $('.js-close').click(this.removePhoto.bind(this));
            this.ajaxUpload();
        },
        ajaxUpload: function () {
            this.uploadImg = page.$('.article-upload-image');
            this.preImg = page.$('.article-preview-photo img');
            this.iconImg = page.$('.article-preview-photo span');
            new ajaxUpload($('.article-add-photo'), {
                action: '<?php echo $this->url('', [
                    'controller' => 'author',
                    'action'     => 'upload',
                ]); ?>fake_id/' + page.resizeFakeId,
                format: page.format(),
                name: 'upload',
                json: true,
                start: function () {
                    page.$('.article-add-photo').val('<?php echo _a('In process ...'); ?>');
                },
                done: function (res) {
                    if (res.status) {
                        page.$('.article-upload-hit').addClass('hide');
                        $('[target=ajaxUploadIframe]').remove();
                        page.$('#photo-cancel').removeAttr('disabled');
                        page.$('#photo-process').removeAttr('disabled');
                        page.initJcrop(res.data);
                    } else {
                        alert(res.message);
                        page.$('.article-add-photo').val('<?php echo _a('Upload'); ?>');
                    }
                },
                fail: function () {
                    alert('<?php echo _a('Error occured, please try again!'); ?>');
                    page.$('.article-add-photo').val('<?php echo _a('Upload'); ?>');
                }
            });
        },
        initJcrop: function (res) {
            var time = new Date().getTime();
            var url = res['preview_url'] + '?' + time,
                boundx = 0,
                boundy = 0;
            var preImg = this.preImg;
            this.result = res;
            this.uploadImg.removeClass('hide').attr('src', url);
            this.preImg.removeClass('hide').attr('src', url);
            this.iconImg.addClass('hide');
            jcrop_api && jcrop_api.destroy();
            if (res.w > res.h) {
                boundx = 300;
            } else {
                boundy = 300;
            }
            if (boundx) {
                boundy = 300 * res.h / res.w;
                this.uploadImg.css({
                    width: 300,
                    height: boundy
                });
            } else {
                boundx = 300 * res.w / res.h;
                this.uploadImg.css({
                    width: boundx,
                    height: 300
                });
            }
            this.uploadImg.Jcrop({
                aspectRatio: 1,
                bgOpacity: .5,
                onChange: function (c) {
                    var rx = page.size / c.w;
                    var ry = page.size / c.h;

                    var r = Math.round;

                    preImg.css({
                        'width': r(rx * boundx),
                        'height': r(ry * boundy),
                        'marginLeft': r(-rx * c.x),
                        'marginTop': r(-ry * c.y)
                    });
                }
            }, function () {
                jcrop_api = this;
                var h = this.ui.holder;
                h.css({
                    left: (300 - h.outerWidth()) / 2,
                    top: (300 - h.outerHeight()) / 2
                });
                this.setSelect([40, 40, 200, 200]);
            });
        },
        cancelUpload: function () {
            var url = '<?php echo $this->url('', [
                    'action' => 'remove-upload',
                ]); ?>fake_id/' + page.resizeFakeId;
            var preImg = this.preImg;
            var iconImg = this.iconImg;
            $.get(url, function (result) {
                result = $.parseJSON(result);
                if (result.status) {
                    var imageUrl = '<?php echo $src ? Pi::url($src) : ''; ?>';
                    imageUrl = page.savedPhoto ? page.savedPhoto : imageUrl;
                    if (imageUrl) {
                        preImg.attr('style', '');
                        preImg.attr('src', imageUrl);
                    } else {
                        preImg.attr('style', '');
                        preImg.attr('src', '');
                        preImg.addClass('hide');
                        iconImg.removeClass('hide');
                    }
                    page.$('.article-upload-hit').removeClass('hide');
                    page.$('.article-uploaded-box img').remove();
                    page.$('.article-uploaded-box').append('<img class="hide article-upload-image">');
                    page.$('.article-uploaded-box .jcrop-holder').remove();
                    page.$('.article-add-photo').val('<?php echo _a('Upload'); ?>');
                    page.init();
                } else {
                    alert(result.message);
                }
                page.$('#photo-cancel').attr('disabled', 'disabled');
                page.$('#photo-process').attr('disabled', 'disabled');
            });
        },
        savePhoto: function (e) {
            var self = this;
            e.preventDefault();
            var d = jcrop_api.tellScaled();
            var ret = this.result.w > this.result.h ? this.result.w / 300 : this.result.h / 300;
            for (var i in d) {
                if (d.hasOwnProperty(i)) {
                    d[i] = Math.round(d[i] * ret);
                }
            }
            d['photo'] = this.result.preview_url;
            d['id'] = '<?php echo $form->get('id')->getValue(); ?>';
            d['fake_id'] = '<?php echo $form->get('fake_id')->getValue(); ?>';
            d['upload_id'] = page.resizeFakeId;

            if (this.result.preview_url) {
                $.post('<?php echo $this->url('', ['action' => 'save-image']); ?>', d).done(function (res) {
                    res = $.parseJSON(res);
                    if (res.status) {
                        page.$('.article-upload-hit').removeClass('hide');
                        page.$('.article-uploaded-box img').remove();
                        page.$('.article-uploaded-box').append('<img class="hide article-upload-image">');
                        page.$('.article-uploaded-box .jcrop-holder').remove();
                        page.$('.article-add-photo').val('<?php echo _a('Upload'); ?>');

                        self.render(res.data);
                        page.savedPhoto = res.data.preview_url;
                        page.init();
                    } else {
                        alert(res.message);
                    }
                    page.$('#photo-cancel').attr('disabled', 'disabled');
                    page.$('#photo-process').attr('disabled', 'disabled');
                });
            }
        },
        removePhoto: function () {
            var self = this;
            var preImg = this.preImg;
            var iconImg = this.iconImg;
            $.getJSON('<?php echo $this->url(
                    '',
                    [
                        'controller' => 'author',
                        'action'     => 'remove-image',
                    ]
                ); ?>' + page.id()).done(function () {
                page.$('[name=image]').val('');
                page.savedPhoto = '';
                self.$("#author-image").html('<span class="fas fa-user"></span>');
                preImg.attr('style', '');
                preImg.attr('src', '');
                preImg.addClass('hide');
                iconImg.removeClass('hide');
                page.init();
            });
        },
        render: function (obj) {
            obj.preview_url = obj.preview_url + '?' + new Date().getTime();
            page.$("#author-image").html(page.template(obj));
        }
    }
    page.events();
    page.init();
</script>
