<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>信息反馈</title>
    <link rel="stylesheet" type="text/css" href="{{ theme }}/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{{ theme }}/css/infoFeedback.css">
    <script type="text/javascript" src="{{ theme }}/js/jquery.min.js"></script>
    <script type="text/javascript" src="{{ theme }}/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="{{ theme }}/js/jquery.mobile.custom.min.js"></script>
    <script>
        $(document).ready(function () {
            var notice = $('#notice');
            var myModal = $('#myModal');
            var textarea = $('#content');
            $('#submit').tap(function () {
                var content = textarea.val();
                if (content.trim() == '') {
                    notice.html('请输入反馈内容');
                    myModal.modal('show');
                } else {
                    $.ajax({
                        type: 'POST',
                        url: '{{ url }}/wp-admin/admin-ajax.php/',
                        data: 'action=submit_comment&user_id={{ user_id }}&content=' + content,
                        success: function () {
                            textarea.val('');
                            notice.html('提交成功');
                            myModal.modal('show');
                        }
                    });
                }
            });
        });
    </script>
</head>
<body>

<div class="container-fluid">
    <p>同策房屋的每一步，都感谢您的参与！（请输入反馈内容）</p>
    <label for="content"></label>
    <textarea class="form-control" rows="10" id="content"></textarea>
    <button type="button" class="btn btn-lg" id="submit">提交</button>
</div>

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content text-center">
            <h4>提示</h4>
            <p id="notice"></p>
            <button type="button" class="btn btn-lg btn-block" data-dismiss="modal">确认</button>
        </div>
    </div>
</div>

</body>
</html>