@extends('admin.layout')

@section('title', '站点设置')
@section('page-title', '站点设置')

@section('content')
<form method="POST" action="{{ route('admin.settings.update') }}" class="form-card">
    @csrf
    @method('PUT')

    <div class="field">
        <label>站点名称</label>
        <input name="site_name" class="input" value="{{ old('site_name', $settings['site_name'] ?? '') }}" required>
    </div>
    <div class="field">
        <label>站点描述（默认 description）</label>
        <input name="site_description" id="site_description" class="input" value="{{ old('site_description', $settings['site_description'] ?? '') }}">
        <p class="form-hint">搜索结果摘要，建议 ≤ 160 字符（超出会被截断）。<span class="char-count" id="cnt-site_description">0 / 160</span></p>
    </div>
    <div class="field">
        <label>SEO 默认标题</label>
        <input name="seo_title_default" id="seo_title_default" class="input" value="{{ old('seo_title_default', $settings['seo_title_default'] ?? '') }}">
        <p class="form-hint">浏览器标签与搜索结果标题，建议 ≤ 60 字符（超出会被截断）。<span class="char-count" id="cnt-seo_title_default">0 / 60</span></p>
    </div>
    <div class="field">
        <label>SEO 默认描述</label>
        <input name="seo_description_default" id="seo_description_default" class="input" value="{{ old('seo_description_default', $settings['seo_description_default'] ?? '') }}">
        <p class="form-hint">全站默认 meta description，建议 ≤ 160 字符。<span class="char-count" id="cnt-seo_description_default">0 / 160</span></p>
    </div>
    <div class="field">
        <label>ICP 备案号</label>
        <input name="icp_no" class="input" value="{{ old('icp_no', $settings['icp_no'] ?? '') }}" placeholder="粤ICP备xxxxx号-x">
        <p class="form-hint">工信部备案号，将链接至 https://beian.miit.gov.cn/</p>
    </div>
    <div class="field">
        <label>公安网备号（联网备案）</label>
        <input name="security_filing_no" class="input" value="{{ old('security_filing_no', $settings['security_filing_no'] ?? '') }}" placeholder="粤公网安备XXXXXXXXXXXX号">
        <p class="form-hint">按公安局要求悬挂联网备案号，格式「X公网安备XXXXXXXXXXXX号」，将链接至 https://beian.mps.gov.cn/</p>
    </div>
    <div class="field">
        <label>Logo 地址（站内横版展示）</label>
        <input name="logo_url" class="input" value="{{ old('logo_url', $settings['logo_url'] ?? '') }}" placeholder="/images/logo-dark.png">
        <p class="form-hint">建议用 PNG，高度 56px（2x 高清屏适配），置于 public/images/ 下。</p>
    </div>
    <div class="field">
        <label>主题配色（前台）</label>
        @php
            $themeSwatches = ['azure' => '#4a8af4', 'slate' => '#6e8cb0', 'indigo' => '#7b7ef0', 'teal' => '#2bb6a4', 'amber' => '#e8a13c'];
            $themeLabels = ['azure' => '沉稳蓝（默认）', 'slate' => '沉静灰蓝', 'indigo' => '蓝紫', 'teal' => '青绿', 'amber' => '暖琥珀'];
            $currentTheme = $settings['theme'] ?? 'azure';
        @endphp
        <div class="theme-options">
            @foreach ($themeSwatches as $key => $color)
                <label class="theme-opt @if($currentTheme === $key) active @endif">
                    <input type="radio" name="theme" value="{{ $key }}" @if($currentTheme === $key) checked @endif>
                    <span class="theme-swatch" style="background: {{ $color }};"></span>
                    <span class="theme-label">{{ $themeLabels[$key] }}</span>
                </label>
            @endforeach
        </div>
        <p class="form-hint">切换后前台主色与辉光（Hero 极光、按钮、卡片高亮）整体跟随变化，保存并刷新即生效。</p>
    </div>
    <div class="field">
        <label>Favicon 地址（浏览器标签图标）</label>
        <input name="favicon_url" class="input" value="{{ old('favicon_url', $settings['favicon_url'] ?? '') }}" placeholder="/images/ccc-icon.ico">
        <p class="form-hint">建议用方形 ICO 或 32×32 PNG。</p>
    </div>
    <div class="field">
        <label>联系邮箱</label>
        <input name="contact_email" class="input" value="{{ old('contact_email', $settings['contact_email'] ?? '') }}">
    </div>
    <div class="field">
        <label>页脚自定义内容（富文本）</label>
        <x-rich-editor name="footer_content" :value="old('footer_content', $settings['footer_content'] ?? '')" />
        <p class="form-hint">支持标题、列表、链接、图片等，用于自由排版页脚信息（如友情链接、资质说明、客服二维码）。留空则前台页脚不显示该区块。</p>
    </div>

    <div class="form-actions">
        <button class="btn btn-primary">保存设置</button>
    </div>
</form>

<script>
    (function () {
        var limits = {
            'seo_title_default': 60,
            'seo_description_default': 160,
            'site_description': 160
        };
        Object.keys(limits).forEach(function (id) {
            var el = document.getElementById(id);
            var cnt = document.getElementById('cnt-' + id);
            if (!el || !cnt) return;
            var max = limits[id];
            function update() {
                var len = (el.value || '').length;
                cnt.textContent = len + ' / ' + max;
                cnt.classList.toggle('over', len > max);
            }
            el.addEventListener('input', update);
            update();
        });
    })();
</script>
@endsection