{extend name="admin/layout" /}

{block name="content"}
<style>
.basic-upload-row {
    display: flex;
    gap: 12px;
    align-items: center;
}
.basic-upload-preview {
    width: 72px;
    height: 72px;
    border: 1px solid #e5e9f2;
    border-radius: 4px;
    background: #f8f9fb;
    object-fit: contain;
    flex: 0 0 auto;
}
.basic-upload-preview.is-cover {
    width: 140px;
    object-fit: cover;
}
.basic-upload-actions {
    flex: 1 1 auto;
    min-width: 0;
}
.basic-upload-actions .input-group {
    margin-bottom: 8px;
}
.basic-file {
    display: none;
}
</style>

<form id="basicForm">
    <div class="row">
        <div class="col-md-8">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">站点信息</h5>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label>站点名称</label>
                        <input type="text" class="form-control" name="name" value="{$siteConfig.name|default=''}">
                    </div>
                    <div class="form-group">
                        <label>副标题</label>
                        <input type="text" class="form-control" name="subtitle" value="{$siteConfig.subtitle|default=''}">
                    </div>
                    <div class="form-group">
                        <label>站点描述</label>
                        <textarea class="form-control" name="sign" rows="3">{$siteConfig.sign|default=''}</textarea>
                    </div>

                    <div class="form-group">
                        <label>Favicon</label>
                        <div class="basic-upload-row">
                            <img class="basic-upload-preview" id="preview_icon" src="{$icon}" alt="Favicon">
                            <div class="basic-upload-actions">
                                <div class="input-group">
                                    <input type="text" class="form-control" name="icon" id="input_icon" value="{$icon}">
                                    <div class="input-group-append">
                                        <button type="button" class="btn btn-default" onclick="selectBasicFile('icon')">上传</button>
                                    </div>
                                </div>
                                <input type="file" class="basic-file" id="file_icon" accept=".ico,image/*" onchange="uploadBasicImage('icon')">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Logo</label>
                        <div class="basic-upload-row">
                            <img class="basic-upload-preview" id="preview_logo" src="{$logo}" alt="Logo">
                            <div class="basic-upload-actions">
                                <div class="input-group">
                                    <input type="text" class="form-control" name="logo" id="input_logo" value="{$logo}">
                                    <div class="input-group-append">
                                        <button type="button" class="btn btn-default" onclick="selectBasicFile('logo')">上传</button>
                                    </div>
                                </div>
                                <input type="file" class="basic-file" id="file_logo" accept="image/*" onchange="uploadBasicImage('logo')">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>首页背景图</label>
                        <div class="basic-upload-row">
                            <img class="basic-upload-preview is-cover" id="preview_homimg" src="{$homimg}" alt="首页背景图">
                            <div class="basic-upload-actions">
                                <div class="input-group">
                                    <input type="text" class="form-control" name="homimg" id="input_homimg" value="{$homimg}">
                                    <div class="input-group-append">
                                        <button type="button" class="btn btn-default" onclick="selectBasicFile('homimg')">上传</button>
                                    </div>
                                </div>
                                <input type="file" class="basic-file" id="file_homimg" accept="image/*" onchange="uploadBasicImage('homimg')">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">显示设置</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>每页文章数</label>
                                <input type="number" class="form-control" name="essgs" value="{$siteConfig.essgs|default=10}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>每页评论数</label>
                                <input type="number" class="form-control" name="commgs" value="{$siteConfig.commgs|default=10}">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>版权信息</label>
                        <input type="text" class="form-control" name="copyright" value="{$siteConfig.copyright|default=''}">
                    </div>
                    <div class="form-group">
                        <label>备案号</label>
                        <input type="text" class="form-control" name="beian" value="{$siteConfig.beian|default=''}">
                    </div>
                    <div class="form-group">
                        <label>前台字体</label>
                        <select class="form-control" name="scfont">
                            {php}
                            $fontValue = siteFontValue((string)($siteConfig['scfont'] ?? 'default'));
                            foreach (siteFontOptions() as $fontKey => $fontOption):
                            {/php}
                            <option value="{$fontKey}" {if condition="$fontValue == $fontKey"}selected{/if}>{$fontOption.label}</option>
                            {php}endforeach;{/php}
                        </select>
                        <small class="form-text text-muted">“公众号阅读字体”使用系统字体栈：苹方 / 微软雅黑 / Segoe UI 等，不加载外部字体，速度最快。</small>
                    </div>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">背景音乐</h5>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label>音乐列表</label>
                        <textarea class="form-control" name="music" rows="5" placeholder="每行一首，格式：名称|URL">{$siteConfig.music|default=''}</textarea>
                    </div>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">随机海报背景</h5>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label>随机图片 API 地址</label>
                        <input type="text" class="form-control" name="poster_random_api" value="{$siteConfig.poster_random_api|default=''}" placeholder="如 https://your-domain.com/api/random-image">
                        <small class="form-text text-muted">填写后，生成海报时若无封面图将从该接口随机获取图片作为背景。接口需直接返回图片（重定向或二进制流），或返回 JSON 格式：{"url": "图片地址"}。</small>
                    </div>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">全站密码</h5>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label>访问密码</label>
                        <input type="password" class="form-control" name="pagepass" value="" placeholder="{:isSitePasswordEnabled($siteConfig['pagepass'] ?? '') ? '留空保持当前密码，填写则重置' : '留空表示不启用'}">
                        {if condition="isSitePasswordEnabled($siteConfig['pagepass'] ?? '')"}
                        <label class="form-check-label mt-2">
                            <input type="checkbox" name="pagepass_clear" value="1"> 关闭全站密码
                        </label>
                        {/if}
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">功能开关</h5>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-0">功能开关已移至 <a href="/admin/authority">权限设置</a> 页面统一管理。</p>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">操作</h5>
                </div>
                <div class="card-body">
                    <button type="submit" class="btn btn-primary btn-block">保存设置</button>
                </div>
            </div>
        </div>
    </div>
</form>
{/block}

{block name="extraJs"}
<script>
function selectBasicFile(field) {
    $('#file_' + field).val('').trigger('click');
}

function uploadBasicImage(field) {
    var fileInput = document.getElementById('file_' + field);
    if (!fileInput || !fileInput.files || !fileInput.files[0]) return;

    var formData = new FormData();
    formData.append('type', field);
    formData.append('file', fileInput.files[0]);

    var token = window.__MEIMIAO_CSRF_TOKEN__ || $('meta[name="csrf-token"]').attr('content') || '';
    if (token) formData.append('allkey', token);

    $.ajax({
        url: '/admin/basic/upload',
        type: 'POST',
        data: formData,
        dataType: 'json',
        processData: false,
        contentType: false,
        success: function(res) {
            if (res && res.code === '200') {
                var url = res.url || (res.data ? res.data.url : '');
                $('#input_' + field).val(url);
                $('#preview_' + field).attr('src', url + (url.indexOf('?') === -1 ? '?t=' : '&t=') + Date.now());
                alert('上传成功');
            } else {
                alert(res ? res.msg : '上传失败');
            }
        },
        error: function(xhr) {
            alert('上传失败(' + xhr.status + ')');
        }
    });
}

$('#basicForm').on('submit', function(e) {
    e.preventDefault();
    var formData = $(this).serialize();


    // 添加 CSRF token
    var token = window.__MEIMIAO_CSRF_TOKEN__ || $('meta[name="csrf-token"]').attr('content') || '';
    if (token) {
        formData += '&allkey=' + encodeURIComponent(token);
    }

    $.ajax({
        url: '/admin/basic/save',
        type: 'POST',
        data: formData,
        dataType: 'json',
        success: function(res) {
            if (res && res.code === '200') {
                alert('保存成功');
            } else {
                alert(res ? res.msg : '保存失败');
            }
        },
        error: function(xhr) {
            alert('保存失败(' + xhr.status + ')');
        }
    });
});
</script>
{/block}