<?php $page_class = 'page-guestbook'; include __DIR__ . '/_header.php'; ?>
<section class="banner-simple"><div class="container"><h1>在线留言</h1></div></section>
<section class="section-block">
    <div class="container form-layout">
        <div class="prose-block">
            <h2>欢迎咨询</h2>
            <p><?php echo htmlspecialchars(tplv(isset($siteConfig) ? $siteConfig : array(), 'site_address', '')); ?></p>
            <div class="footer-qrcode">
                <?php if (preg_match('/\.(jpg|jpeg|png|gif|webp|svg)(\?.*)?$/i', $tplCustomTitleValue)) { ?>
                <img src="<?php echo htmlspecialchars($tplCustomTitleValue); ?>" alt="<?php echo htmlspecialchars($tplSiteName); ?>">
                <?php } else { ?>
                <?php echo htmlspecialchars($tplCustomTitleValue); ?>
                <?php } ?>
            </div>
            <div id="guestbookList" class="guestbook-list"></div>
        </div>
        <form class="contact-form" id="guestbookForm" action="/public/guestbook.php?ajax=guestbook" method="post">
            <input type="text" name="name" placeholder="姓名" required>
            <input type="text" name="contact" placeholder="手机号或邮箱">
            <input type="text" name="title" placeholder="标题">
            <textarea name="content" rows="6" placeholder="请输入留言内容" required></textarea>
            <button class="btn btn-primary" type="submit" id="guestbookSubmitBtn">提交留言</button>
            <div id="guestbookMsg" class="form-message"></div>
        </form>
    </div>
</section>
<script>
(function(){
    var form = document.getElementById('guestbookForm');
    var msg = document.getElementById('guestbookMsg');
    var btn = document.getElementById('guestbookSubmitBtn');
    var list = document.getElementById('guestbookList');
    function esc(s){return String(s || '').replace(/[&<>"']/g,function(c){return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];});}
    function loadList(page){
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/public/guestbook.php?ajax=guestbook&page=' + (page || 1), true);
        xhr.onreadystatechange = function(){
            if (xhr.readyState !== 4 || xhr.status !== 200) return;
            try {
                var d = JSON.parse(xhr.responseText), html = '';
                if (d.data && d.data.length) {
                    for (var i = 0; i < d.data.length; i++) {
                        var item = d.data[i];
                        html += '<div class="guestbook-item">';
                        html += '<div class="guestbook-item-head"><strong>' + esc(item.name) + '</strong><span>' + new Date(item.create_time * 1000).toLocaleString() + '</span></div>';
                        if (item.title) html += '<div class="guestbook-item-title">' + esc(item.title) + '</div>';
                        html += '<div class="guestbook-item-content">' + esc(item.content).replace(/\n/g, '<br>') + '</div>';
                        if (item.reply) html += '<div class="guestbook-item-reply"><b>回复：</b>' + esc(item.reply).replace(/\n/g, '<br>') + '</div>';
                        html += '</div>';
                    }
                } else {
                    html = '<div class="guestbook-empty">暂无留言</div>';
                }
                list.innerHTML = html;
            } catch (e) {}
        };
        xhr.send(null);
    }
    if (form) {
        form.onsubmit = function(e){
            e.preventDefault();
            btn.disabled = true;
            btn.innerHTML = '提交中...';
            msg.innerHTML = '';
            var xhr = new XMLHttpRequest();
            xhr.open('POST', form.action, true);
            xhr.onreadystatechange = function(){
                if (xhr.readyState !== 4) return;
                btn.disabled = false;
                btn.innerHTML = '提交留言';
                if (xhr.status === 200) {
                    try {
                        var d = JSON.parse(xhr.responseText);
                        msg.innerHTML = '<div class="' + (d.code === 200 ? 'msg-success' : 'msg-error') + '">' + esc(d.msg) + '</div>';
                        if (d.code === 200) { form.reset(); loadList(1); }
                    } catch (err) {
                        msg.innerHTML = '<div class="msg-error">提交失败，请稍后重试</div>';
                    }
                } else {
                    msg.innerHTML = '<div class="msg-error">提交失败，请稍后重试</div>';
                }
            };
            xhr.send(new FormData(form));
        };
        loadList(1);
    }
})();
</script>
<?php include __DIR__ . '/_footer.php'; ?>
