<?php
if ($this->session->flashdata('response') !== null) {
    echo "<p>" . $this->session->flashdata('response') . '</p>';
}

?>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js">
</script>

<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css" rel="stylesheet" />

<h3 class="text-left">推薦獎賞設定</h3>

<form id="form" action="/referral_setting/save" method="post" enctype="multipart/form-data" class="form-horizontal form-container">
    <div class="form-group">
        <label for='code_prefix' class="col-md-4 control-label">* 編號前綴</label>
        <div class="col-md-8">
            <input type='text' id='code_prefix' name='code_prefix' value="<?php echo $item['code_prefix']; ?>" />
        </div>
    </div>
    <div style="margin-top:15px"></div>
    <div class="form-group">
        <label for='description' class="col-md-4 control-label">* 頁面介紹</label>
        <div class="col-md-8">
            <textarea id='description' name='description' rows='5' cols='70'><?php echo $item['description']; ?></textarea>
        </div>
    </div>
    <div style="margin-top:15px"></div>
    <div class="form-group">
        <label for='template_title' class="col-md-4 control-label">* 分享範本標題</label>
        <div class="col-md-8">
            <input type='text' id='template_title' name='template_title' value="<?php echo $item['template_title']; ?>" />
        </div>
    </div>
    <div class="form-group">
        <label for='template_message' class="col-md-4 control-label">* 分享範本內容</label>
        <div class="col-md-8">
            <textarea id='template_message' name='template_message' rows='5' cols='70'><?php echo $item['template_message']; ?></textarea>
        </div>
    </div>
    <div class="form-group">
        <label for='template_preview' class="col-md-4 control-label">分享範本預覽</label>
        <div class="col-sm-8" style="min-height: 114px;">
            <label class="mas-text"><span class="text block" id="template_preview" name="template_preview"></span></label>
        </div>
    </div>
    <!-- <div class="form-group">
        <label for='url' class="col-md-4 control-label">* 分享範本網址</label>
        <div class="col-md-8">
            <input type='text' id='url' name='url' value="<?php echo $item['url']; ?>" />
        </div>
    </div> -->
    <div id="imgblock">
        預設相片：
        <div style="margin-bottom: 15px"></div>
        <div class="form-group">
            <img height="400" src="<?php echo base_url('uploads') . $item['pathname'] ?>">
        </div>
        <div style="margin-bottom: 15px"></div>
        <a id="poster-link" href="<?php echo base_url('/referral_poster'); ?>" target="_blank">按此查看當前範本相片 (poster)</a>
        <div style="margin-bottom: 15px"></div>
        <button type="button" id="reupload">重新上傳</button>
        <div style="margin-bottom: 15px"></div>
    </div>

    <div id="uploadblock">
        <div class="form-group">
            <label for='fileToUpload' class="col-sm-4 control-label">分享範本相片</label>
            <div class="col-sm-8">
                <input type="file" name="fileToUpload" id="fileToUpload" onchange="openFile(event)" />
                <div style="padding-left: 20px;">
                    <div class="output-container" style="max-width: 768px;max-height: 400px;text-align: center;margin: auto;">
                        <img id="output" style="max-width: 768px; max-height: 400px; margin: auto;">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <ul style="list-style: none;">
        <li><i>* 上傳圖片時請使用低於 2MB 的相片。</i></li>
    </ul>

    <div class="form-group">
        <div class="">
            <button class="btn btn-success submit">儲存</button>
            <a href="/referral_setting" class="btn btn-cancel">取消</a>
        </div>
    </div>
</form>

<script>
    let reuploadChecked = false;
    const referralPosterLink = $('#poster-link').attr('href');
    const referralCode = 'SDM-00001';

    var openFile = function(event) {
        var input = event.target;

        let file = input.files[0];
        if (file.size > 2 * 1024 * 1024) {
            alert('請上傳 2MB 或以內的相片。');
            $('#fileToUpload').val("");
            return false;
        }
        if (['image/png', 'image/jpeg', 'image/gif'].includes(file.type) === false) {
            alert('請上傳合乎格式的相片：png, jpeg, jpg, gif.');
            $('#fileToUpload').val("");
            return false;
        }

        var reader = new FileReader();
        reader.onload = function() {
            var dataURL = reader.result;
            var output = document.getElementById('output');
            output.src = dataURL;

            $('#output').parent().addClass('has-output-black');
        };
        var a = reader.readAsDataURL(input.files[0]);

        console.log(a);
    };

    function updateTemplatePreview() {
        const templateMessage = $('#template_message').val();
        $('#template_preview').text(templateMessage.replace('{url}', referralPosterLink).replace('{referral_code}', referralCode));
    }
    $(document).ready(function() {
        $('#uploadblock').hide();
        updateTemplatePreview();
    });
    $("#template_message").on('input', function() {
        updateTemplatePreview();
    });
    $('#reupload').on('click', function() {
        reuploadChecked = true;
        $('#imgblock').hide();
        $(this).hide();
        $('#uploadblock').show();
    });
    $('.submit').on('click', function() {
        // return false;
        if (validform() === true) {
            return true;
        }
        return false;
    });

    function validform() {
        let valid = true;
        const message = $('#template_message').val();
        if (message.indexOf('{url}') === -1 || message.indexOf('{referral_code}') === -1) {
            alert('分享範本內容必須包括{url}及{referral_code} !');
            valid = false;
        }
        if (reuploadChecked) {
            if ($('#fileToUpload').val() === '') {
                alert('請上傳相片!');
                valid = false;
            }
        }
        return valid;
    }
</script>