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

<ul class="table-toolbar" style="text-align: left;">
    <li><a class="toolbar-element btn btn-default btn-create" href="/promotion"><i class="fa fa-chevron-left" style="margin-right: 8px;"></i>返回</a></li>
</ul>

<form id="form" action="/promotion/save" method="post" enctype="multipart/form-data" class="form-horizontal form-container">

    <input type="hidden" value="c" name="mode">

    <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 class="form-group">
        <label for='title' class="col-sm-4 control-label">標題*</label>
        <div class="col-sm-8">
            <input type='text' id='title' name='title' />
        </div>
    </div>
    <div class="form-group">
        <label for='content' class="col-sm-4 control-label">內容*</label>
        <div class="col-sm-8">
            <textarea id='content' name='content' rows='5' cols='70'></textarea>
        </div>
    </div>
    <div class="form-group">
        <label for="issuedt" class="col-sm-4 control-label">發佈日期*</label>
        <div class="col-sm-8">
            <div class='input-group date' id='datetimepicker1'>
                <input id="issuedt" name="issuedt" type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label for="due_datetime" class="col-sm-4 control-label">截止日期</label>
        <div class="col-sm-8">
            <div class='input-group date' id='datetimepicker2'>
                <input id="due_datetime" name="due_datetime" type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label for='show_in_banner' class="col-sm-4 control-label">顯示在廣告版上</label>
        <div class="col-sm-8">
            <input type='checkbox' id='show_in_banner' name='show_in_banner' />
        </div>
    </div>
    <input type='hidden' name="push" id="push" value="1" />
    <div class="form-group">
        <label for='remark' class="col-sm-4 control-label">備註</label>
        <div class="col-sm-8">
            <textarea id='remark' name='remark' rows='5' cols='70'></textarea>
        </div>
    </div>

    <ul style="list-style: none;">
        <li><i>* 上傳圖片時請使用低於 2MB 的相片，解像度為 768 x 400。</i></li>
        <li><i>* 若要重覆執行推播，必須另外創建。</i></li>
    </ul>

    <div class="form-group">
        <div class="">
            <input type='submit' class="btn btn-success submit" value="儲存" />
            <a href="/promotion" class="btn btn-cancel">取消</a>
        </div>
    </div>
</form>

<script>
    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');
        };
        var a = reader.readAsDataURL(input.files[0]);

        console.log(a);
    };
    $(document).ready(function() {
        $('#datetimepicker1, #datetimepicker2').datetimepicker({
            format: 'YYYY-MM-DD HH:mm',
            locale: moment.locale('zh-hk')
        });
    });
</script>