{{-- 文件功能：站长隐藏登录页 --}}
@php
    $systemName = \App\Models\SysParam::where('alias', 'sys_name')->value('body') ?? '和平聊吧';
@endphp
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>站长后台入口 - {{ $systemName }}</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;900&family=Noto+Serif+SC:wght@700;900&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg: #fafaf9;
            --paper: #f5f1e8;
            --ink: #0c0a09;
            --ink-soft: #57534e;
            --ink-faint: #a8a29e;
            --line: #d6d3d1;
            --line-strong: #1c1917;
            --panel: #111111;
            --panel-soft: #1f1f1f;
            --gold: #a16207;
            --gold-soft: #f4d9a8;
            --danger: #b91c1c;
            --danger-bg: #fef2f2;
            --success: #166534;
            --success-bg: #f0fdf4;
            --shadow: 0 28px 90px rgba(12, 10, 9, 0.12);
        }

        * {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            min-height: 100%;
        }

        body {
            font-family: "DM Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
            color: var(--ink);
            background:
                radial-gradient(circle at top left, rgba(161, 98, 7, 0.08), transparent 18%),
                linear-gradient(180deg, #fcfbf8 0%, #f7f4ee 100%);
        }

        .shell {
            width: min(1380px, calc(100% - 32px));
            margin: 16px auto;
            min-height: calc(100vh - 32px);
            border: 1px solid var(--line-strong);
            background: var(--bg);
            box-shadow: var(--shadow);
            display: grid;
            grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr);
            position: relative;
            overflow: hidden;
        }

        .shell::before {
            content: "";
            position: absolute;
            inset: 18px;
            border: 1px solid rgba(28, 25, 23, 0.08);
            pointer-events: none;
        }

        .hero {
            padding: 38px 42px 34px;
            border-right: 1px solid var(--line-strong);
            display: grid;
            grid-template-rows: auto 1fr auto;
            gap: 30px;
            background:
                linear-gradient(180deg, rgba(161, 98, 7, 0.03), transparent 26%),
                linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), rgba(28, 25, 23, 0.04) calc(100% - 1px));
        }

        .topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding-bottom: 18px;
            border-bottom: 1px solid var(--line);
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            border: 1px solid var(--line-strong);
            background: #fff;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.24em;
            text-transform: uppercase;
        }

        .eyebrow::before {
            content: "";
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--gold);
        }

        .system-name {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--ink-soft);
            text-align: right;
        }

        .hero-main {
            display: grid;
            align-content: center;
            gap: 24px;
        }

        .kicker {
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: var(--gold);
        }

        .title {
            margin: 0;
            font-size: clamp(4rem, 10vw, 8.8rem);
            line-height: 0.88;
            letter-spacing: -0.06em;
            font-weight: 900;
            text-transform: uppercase;
        }

        .title-accent {
            display: block;
            color: var(--gold);
        }

        .lead {
            max-width: 620px;
            margin: 0;
            color: var(--ink-soft);
            font-size: 18px;
            line-height: 1.8;
        }

        .rule {
            width: 92px;
            height: 6px;
            background: var(--line-strong);
        }

        .hero-meta {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
            border-top: 1px solid var(--line);
            padding-top: 22px;
        }

        .meta-card {
            padding: 20px 18px;
            background: var(--paper);
            border: 1px solid var(--line);
            min-height: 152px;
        }

        .meta-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--ink-soft);
        }

        .meta-value {
            margin-top: 14px;
            font-size: clamp(1.9rem, 3vw, 3.2rem);
            line-height: 0.95;
            font-weight: 900;
            color: var(--ink);
        }

        .meta-copy {
            margin-top: 12px;
            color: var(--ink-soft);
            font-size: 14px;
            line-height: 1.8;
        }

        .panel {
            background: var(--panel);
            color: #fff;
            padding: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .panel-card {
            width: min(100%, 470px);
            border: 1px solid rgba(255, 255, 255, 0.12);
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
                var(--panel);
            padding: 28px;
            position: relative;
        }

        .panel-card::before {
            content: "";
            position: absolute;
            inset: 14px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            pointer-events: none;
        }

        .panel-top {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 26px;
        }

        .panel-kicker {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--gold-soft);
        }

        .panel-title {
            margin: 10px 0 8px;
            font-family: "Noto Serif SC", serif;
            font-size: 34px;
            line-height: 1.12;
            font-weight: 900;
        }

        .panel-copy {
            margin: 0;
            color: rgba(255, 255, 255, 0.72);
            font-size: 15px;
            line-height: 1.85;
        }

        .status-tag {
            padding: 10px 12px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #fff;
            white-space: nowrap;
        }

        .form {
            position: relative;
            z-index: 1;
            display: grid;
            gap: 18px;
        }

        .field {
            display: grid;
            gap: 8px;
        }

        .field label {
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.06em;
            color: rgba(255, 255, 255, 0.76);
        }

        .field input {
            width: 100%;
            border: 1px solid rgba(255, 255, 255, 0.16);
            background: rgba(255, 255, 255, 0.04);
            color: #fff;
            padding: 16px 18px;
            font-size: 16px;
            font-weight: 600;
            outline: none;
            transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
        }

        .field input::placeholder {
            color: rgba(255, 255, 255, 0.36);
        }

        .field input:focus {
            border-color: rgba(244, 217, 168, 0.9);
            background: rgba(255, 255, 255, 0.08);
            box-shadow: 0 0 0 3px rgba(161, 98, 7, 0.22);
        }

        .captcha-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 148px;
            gap: 12px;
            align-items: stretch;
        }

        .captcha-image {
            width: 100%;
            height: 56px;
            padding: 8px 10px;
            object-fit: contain;
            object-position: center;
            cursor: pointer;
            border: 1px solid rgba(255, 255, 255, 0.16);
            background: #fff;
            box-sizing: border-box;
        }

        .message {
            padding: 14px 16px;
            border: 1px solid;
            font-size: 14px;
            line-height: 1.75;
        }

        .message-success {
            border-color: rgba(34, 197, 94, 0.34);
            background: rgba(22, 101, 52, 0.18);
            color: #dcfce7;
        }

        .message-error {
            border-color: rgba(248, 113, 113, 0.34);
            background: rgba(127, 29, 29, 0.16);
            color: #fecaca;
        }

        .submit {
            width: 100%;
            border: 1px solid var(--gold);
            background: linear-gradient(180deg, #d5a548 0%, #a16207 100%);
            color: #fff;
            padding: 17px 18px;
            font-size: 15px;
            font-weight: 900;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            cursor: pointer;
            transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
            box-shadow: 0 18px 28px rgba(161, 98, 7, 0.2);
        }

        .submit:hover {
            transform: translateY(-2px);
            filter: saturate(1.03);
            box-shadow: 0 22px 34px rgba(161, 98, 7, 0.28);
        }

        .helper {
            position: relative;
            z-index: 1;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid rgba(255, 255, 255, 0.12);
            color: rgba(255, 255, 255, 0.56);
            font-size: 13px;
            line-height: 1.8;
        }

        .helper strong {
            color: #fff;
        }

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation: none !important;
                transition: none !important;
                scroll-behavior: auto !important;
            }
        }

        @media (max-width: 1080px) {
            .shell {
                grid-template-columns: 1fr;
            }

            .hero {
                border-right: 0;
                border-bottom: 1px solid var(--line-strong);
            }

            .hero-meta {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 720px) {
            .shell {
                width: min(100%, calc(100% - 18px));
                margin: 9px auto;
                min-height: calc(100vh - 18px);
            }

            .shell::before {
                inset: 10px;
            }

            .hero,
            .panel {
                padding: 18px;
            }

            .hero-main {
                gap: 18px;
            }

            .title {
                font-size: clamp(3rem, 20vw, 4.8rem);
            }

            .panel-card {
                padding: 20px;
            }

            .panel-top,
            .captcha-row {
                grid-template-columns: 1fr;
                display: grid;
            }
        }
    </style>
</head>

<body>
    <main class="shell">
        <section class="hero">
            <header class="topbar">
                <div class="eyebrow">Hidden Admin Entry</div>
                <div class="system-name">{{ $systemName }}</div>
            </header>

            <div class="hero-main">
                <div class="kicker">Trust / Authority / Private Access</div>
                <h1 class="title">
                    Owner
                    <span class="title-accent">Console</span>
                </h1>
                <div class="rule" aria-hidden="true"></div>
                <p class="lead">
                    这是一个独立于聊天室首页的后台登录入口。这里只做站长控制台访问，不承载普通用户登录，不会在登录成功后打开聊天室页面。
                </p>
            </div>

            <div class="hero-meta">
                <article class="meta-card">
                    <div class="meta-label">入口后缀</div>
                    <div class="meta-value">{{ $loginSuffix }}</div>
                    <div class="meta-copy">保留隐藏后缀，不在首页暴露。这个入口只用于后台控制台访问。</div>
                </article>

                <article class="meta-card">
                    <div class="meta-label">权限约束</div>
                    <div class="meta-value">id=1</div>
                    <div class="meta-copy">只有站长主账号可以从这里登录，其他账号即使密码正确也会被拒绝。</div>
                </article>

                <article class="meta-card">
                    <div class="meta-label">登录去向</div>
                    <div class="meta-value">Admin</div>
                    <div class="meta-copy">验证通过后直接进入后台首页，不跳聊天室大厅，不走“登录即注册”。</div>
                </article>
            </div>
        </section>

        <section class="panel">
            <div class="panel-card">
                <div class="panel-top">
                    <div>
                        <div class="panel-kicker">Owner Authentication</div>
                        <h2 class="panel-title">登录后台控制台</h2>
                        <p class="panel-copy">输入站长账号、密码和验证码后进入后台。</p>
                    </div>
                    <div class="status-tag">Restricted</div>
                </div>

                <form method="POST" action="{{ route('admin.login.store') }}" class="form">
                    @csrf

                    <div class="field">
                        <label for="username">站长账号</label>
                        <input id="username" name="username" type="text" value="{{ old('username') }}"
                            placeholder="请输入 id=1 对应的用户名" autocomplete="username" autofocus required>
                    </div>

                    <div class="field">
                        <label for="password">登录密码</label>
                        <input id="password" name="password" type="password" placeholder="请输入站长密码"
                            autocomplete="current-password" required>
                    </div>

                    <div class="field">
                        <label for="captcha">验证码</label>
                        <div class="captcha-row">
                            <input id="captcha" name="captcha" type="text" placeholder="输入验证码" required>
                            <img src="/captcha/default?{{ mt_rand() }}" alt="站长登录验证码" id="captcha-img" class="captcha-image"
                                onclick="refreshCaptcha()" title="点击刷新验证码">
                        </div>
                    </div>

                    @if (session('success'))
                        <div class="message message-success" role="status" aria-live="polite">
                            {{ session('success') }}
                        </div>
                    @endif

                    @if ($errors->any())
                        <div class="message message-error" role="alert" aria-live="assertive">
                            <ul style="margin: 0; padding-left: 18px;">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <button type="submit" class="submit">进入后台控制台</button>
                </form>

                <div class="helper">
                    <strong>提示：</strong>点击右侧验证码图片可刷新。如果页面仍显示旧样式，直接强制刷新浏览器缓存即可。
                </div>
            </div>
        </section>
    </main>

    <script>
        /**
         * 刷新验证码图片，避免浏览器缓存旧图。
         */
        function refreshCaptcha() {
            document.getElementById('captcha-img').src = '/captcha/default?' + Math.random();
        }
    </script>
</body>

</html>
