{{--
    文件功能：和平聊吧登录首页（全屏军旅版）
    说明：展示军旅海报主视觉、战友登录表单与房间选择，并保留原有登录交互逻辑
--}}
@php
    $systemName = \App\Models\SysParam::where('alias', 'sys_name')->value('body') ?? '和平聊吧';
    $systemNotice = \App\Models\SysParam::where('alias', 'sys_notice')->value('body') ?? '欢迎归队，第一次登录即为注册，请妥善保管密码。';
    $smtpEnabled = \App\Models\SysParam::where('alias', 'smtp_enabled')->value('body') === '1';
    $roomCount = count($rooms);
    $defaultRoom = $rooms[0] ?? null;
    $heroImage = asset('images/veteran-hero.jpg');
    $flashMessage = session('status') ?? session('success') ?? session('error');
    $flashType = session()->has('error') ? 'error' : ($flashMessage ? 'success' : null);
@endphp
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $systemName }}</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <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=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Serif+SC:wght@700;900&family=Oswald:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg: #0d0f0d;
            --panel: #ded3bd;
            --panel-soft: #ece3d1;
            --text: #1b1a15;
            --text-soft: #5f5b4f;
            --border: rgba(71, 58, 36, 0.22);
            --red: #7d231c;
            --red-deep: #57140f;
            --gold: #c6a35b;
            --khaki: #5c654f;
            --line: rgba(255, 255, 255, 0.08);
            --success: #34553e;
            --danger: #8f2e27;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        body {
            font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
            background:
                radial-gradient(circle at 10% 16%, rgba(198, 163, 91, 0.13), transparent 24%),
                radial-gradient(circle at 90% 86%, rgba(125, 35, 28, 0.14), transparent 22%),
                linear-gradient(145deg, #090b09, #161915 46%, #0c0d0c 100%);
            color: var(--text);
            padding: 16px;
            overflow-y: auto;
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            background-image:
                linear-gradient(var(--line) 1px, transparent 1px),
                linear-gradient(90deg, var(--line) 1px, transparent 1px);
            background-size: 26px 26px;
            pointer-events: none;
        }

        .shell {
            width: min(1440px, 100%);
            height: min(920px, calc(100svh - 32px));
            margin: 0 auto;
            display: grid;
            grid-template-columns: minmax(0, 1.28fr) minmax(420px, 0.72fr);
            border: 1px solid rgba(198, 163, 91, 0.28);
            background: rgba(7, 8, 7, 0.92);
            box-shadow: 0 26px 70px rgba(0, 0, 0, 0.4);
            overflow: hidden;
            position: relative;
        }

        .shell::before {
            content: "";
            position: absolute;
            inset: 8px;
            border: 1px solid rgba(198, 163, 91, 0.14);
            pointer-events: none;
        }

        .poster {
            position: relative;
            padding: 26px 30px 24px;
            display: grid;
            grid-template-rows: auto 1fr auto;
            overflow: hidden;
            color: #f7f1e1;
            background:
                linear-gradient(90deg, rgba(4, 5, 4, 0.92) 0%, rgba(4, 5, 4, 0.78) 26%, rgba(6, 7, 6, 0.42) 58%, rgba(73, 18, 15, 0.3) 100%),
                linear-gradient(180deg, rgba(9, 10, 8, 0.1), rgba(9, 10, 8, 0.76)),
                linear-gradient(135deg, rgba(198, 163, 91, 0.12), transparent 30%),
                linear-gradient(220deg, rgba(125, 35, 28, 0.18), transparent 30%),
                url('{{ $heroImage }}') center center / cover no-repeat,
                #060707;
        }

        .poster::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at center, rgba(198, 163, 91, 0.08), transparent 42%),
                repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0, rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 96px);
            pointer-events: none;
        }

        .poster::after {
            content: "93";
            position: absolute;
            right: 18px;
            bottom: -10px;
            font-family: "Oswald", sans-serif;
            font-size: clamp(150px, 18vw, 250px);
            line-height: 0.85;
            color: rgba(198, 163, 91, 0.08);
            pointer-events: none;
        }

        .poster > * {
            position: relative;
            z-index: 1;
        }

        .poster-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
        }

        .poster-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            border: 1px solid rgba(255, 241, 210, 0.24);
            background: rgba(0, 0, 0, 0.34);
            font-size: 12px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .poster-badge svg {
            width: 18px;
            height: 18px;
            color: var(--gold);
            flex-shrink: 0;
        }

        .poster-code {
            text-align: right;
            font-family: "Oswald", sans-serif;
            font-size: 12px;
            line-height: 1.55;
            letter-spacing: 0.16em;
            color: rgba(247, 241, 225, 0.72);
        }

        .poster-main {
            position: relative;
            display: flex;
            align-items: center;
            max-width: 650px;
        }

        .poster-stamp {
            position: absolute;
            top: 18px;
            right: -26px;
            border: 1px solid rgba(198, 163, 91, 0.42);
            color: rgba(198, 163, 91, 0.96);
            padding: 8px 14px;
            transform: rotate(12deg);
            font-family: "Oswald", sans-serif;
            font-size: 13px;
            letter-spacing: 0.14em;
            background: rgba(0, 0, 0, 0.28);
        }

        .poster-copy {
            max-width: 560px;
        }

        .poster-kicker {
            display: inline-block;
            padding: 8px 14px;
            background: linear-gradient(90deg, var(--red), rgba(125, 35, 28, 0.6));
            border-left: 4px solid var(--gold);
            font-size: 12px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
        }

        .poster-title {
            margin-top: 18px;
            font-family: "Noto Serif SC", serif;
            font-size: clamp(56px, 6vw, 88px);
            line-height: 1.02;
            letter-spacing: 0.04em;
            text-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
        }

        .poster-lead {
            margin-top: 16px;
            font-size: clamp(18px, 2vw, 28px);
            line-height: 1.5;
            color: rgba(247, 241, 225, 0.95);
        }

        .poster-story {
            margin-top: 18px;
            max-width: 520px;
            padding-left: 16px;
            border-left: 3px solid rgba(198, 163, 91, 0.7);
            font-size: 15px;
            line-height: 1.9;
            color: rgba(247, 241, 225, 0.8);
        }

        .poster-points {
            margin-top: 22px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .poster-point {
            padding: 10px 14px;
            border: 1px solid rgba(255, 241, 210, 0.16);
            background: rgba(12, 14, 12, 0.48);
            font-size: 13px;
            line-height: 1.4;
            color: rgba(247, 241, 225, 0.88);
        }

        .poster-bottom {
            display: grid;
            gap: 12px;
            align-self: end;
        }

        .poster-notice {
            width: min(100%, 700px);
            padding: 12px 14px;
            border-left: 4px solid var(--gold);
            background: linear-gradient(90deg, rgba(17, 14, 12, 0.88), rgba(17, 14, 12, 0.36));
            font-size: 13px;
            line-height: 1.8;
            color: rgba(247, 241, 225, 0.88);
        }

        .poster-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            width: min(100%, 700px);
            font-size: 11px;
            line-height: 1.6;
            color: rgba(247, 241, 225, 0.66);
        }

        .poster-meta a {
            color: rgba(245, 217, 159, 0.96);
            text-decoration: none;
        }

        .poster-meta a:hover {
            text-decoration: underline;
        }

        .panel {
            position: relative;
            display: grid;
            grid-template-rows: auto auto 1fr auto;
            gap: 14px;
            padding: 24px 24px 18px;
            background:
                linear-gradient(180deg, rgba(18, 18, 17, 0.96), rgba(33, 25, 20, 0.96)),
                radial-gradient(circle at 8% 12%, rgba(198, 163, 91, 0.08), transparent 28%),
                repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 32px);
            color: #f2eadc;
            overflow: hidden;
            border-left: 1px solid rgba(198, 163, 91, 0.16);
        }

        .panel::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: linear-gradient(90deg, var(--red-deep), var(--gold), var(--khaki));
        }

        .panel-header {
            border-bottom: 1px solid rgba(198, 163, 91, 0.18);
            padding-bottom: 14px;
        }

        .panel-header small {
            display: block;
            font-family: "Oswald", sans-serif;
            font-size: 11px;
            letter-spacing: 0.2em;
            color: rgba(198, 163, 91, 0.74);
        }

        .panel-header h2 {
            margin-top: 6px;
            font-family: "Noto Serif SC", serif;
            font-size: clamp(34px, 4vw, 48px);
            line-height: 1.08;
            color: #f6efe2;
        }

        .panel-header p {
            margin-top: 10px;
            font-size: 13px;
            line-height: 1.7;
            color: rgba(242, 234, 220, 0.68);
        }

        #alert-box {
            display: none;
            padding: 10px 12px;
            border-left: 4px solid transparent;
            font-size: 13px;
            line-height: 1.6;
        }

        .alert-error {
            background: rgba(143, 46, 39, 0.08);
            border-color: var(--danger);
            color: var(--danger);
        }

        .alert-success {
            background: rgba(52, 85, 62, 0.08);
            border-color: var(--success);
            color: var(--success);
        }

        .login-form {
            display: grid;
            grid-template-rows: auto auto auto auto auto auto;
            gap: 12px;
            min-height: 0;
            align-content: start;
        }

        .field-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .field-block label,
        .field-title {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
            font-size: 13px;
            font-weight: 700;
            color: rgba(246, 239, 226, 0.94);
        }

        .field-index {
            min-width: 24px;
            font-family: "Oswald", sans-serif;
            font-size: 12px;
            letter-spacing: 0.12em;
            color: rgba(198, 163, 91, 0.74);
        }

        .field-input,
        .field-select {
            width: 100%;
            height: 48px;
            padding: 0 14px;
            border: 1px solid rgba(198, 163, 91, 0.24);
            background: rgba(255, 248, 236, 0.06);
            color: #f5eee0;
            font-size: 14px;
            transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
        }

        .field-select {
            appearance: none;
            background-image:
                linear-gradient(45deg, transparent 50%, #b6a27c 50%),
                linear-gradient(135deg, #b6a27c 50%, transparent 50%);
            background-position:
                calc(100% - 20px) 21px,
                calc(100% - 14px) 21px;
            background-size: 6px 6px, 6px 6px;
            background-repeat: no-repeat;
            padding-right: 38px;
        }

        .field-input::placeholder {
            color: rgba(242, 234, 220, 0.42);
        }

        .field-input:focus,
        .field-select:focus {
            outline: none;
            border-color: rgba(198, 163, 91, 0.56);
            background: rgba(255, 248, 236, 0.1);
            box-shadow: 0 0 0 3px rgba(198, 163, 91, 0.08);
        }

        .captcha-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 150px;
            gap: 10px;
        }

        .captcha-image {
            width: 100%;
            height: 48px;
            border: 1px solid rgba(198, 163, 91, 0.24);
            background: rgba(255, 248, 236, 0.96);
            object-fit: cover;
            cursor: pointer;
        }

        .gender-row {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .gender-option {
            display: flex;
            align-items: center;
            gap: 8px;
            height: 48px;
            padding: 0 14px;
            border: 1px solid rgba(198, 163, 91, 0.24);
            background: rgba(255, 248, 236, 0.06);
            cursor: pointer;
            transition: border-color 0.2s ease, background-color 0.2s ease;
        }

        .gender-option:hover {
            border-color: rgba(198, 163, 91, 0.52);
            background: rgba(255, 248, 236, 0.1);
        }

        .gender-option.selected {
            border-color: rgba(198, 163, 91, 0.62);
            background: linear-gradient(90deg, rgba(125, 35, 28, 0.18), rgba(255, 248, 236, 0.08));
        }

        .gender-option input {
            accent-color: var(--red);
        }

        .room-hint {
            margin-top: 6px;
            font-size: 12px;
            line-height: 1.6;
            color: rgba(242, 234, 220, 0.54);
        }

        .action-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 136px;
            gap: 10px;
        }

        .btn {
            height: 52px;
            border: 1px solid transparent;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 0.04em;
            cursor: pointer;
            transition: filter 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
        }

        .btn:focus-visible {
            outline: 2px solid rgba(125, 35, 28, 0.58);
            outline-offset: 2px;
        }

        .btn-primary {
            background: linear-gradient(90deg, var(--red-deep), var(--red), #8d342d);
            color: #f6eddc;
            border-top: 2px solid rgba(234, 212, 170, 0.46);
        }

        .btn-primary:hover {
            transform: translateY(-1px);
            filter: brightness(1.04);
        }

        .btn-secondary {
            background: rgba(255, 248, 236, 0.05);
            border-color: rgba(198, 163, 91, 0.24);
            color: rgba(246, 239, 226, 0.88);
        }

        .btn-secondary:hover {
            background: rgba(255, 248, 236, 0.09);
        }

        .btn:disabled {
            opacity: 0.65;
            cursor: not-allowed;
            transform: none;
            filter: none;
        }

        .panel-footer {
            display: grid;
            gap: 6px;
            align-self: end;
            font-size: 12px;
            line-height: 1.6;
            color: rgba(242, 234, 220, 0.6);
        }

        .panel-footer a {
            color: rgba(222, 109, 96, 0.98);
            text-decoration: none;
        }

        .panel-footer a:hover {
            text-decoration: underline;
        }

        .site-credit {
            font-family: "Oswald", sans-serif;
            font-size: 13px;
            letter-spacing: 0.08em;
            color: rgba(198, 163, 91, 0.6);
        }

        @media (max-width: 1180px) {
            .shell {
                height: auto;
                min-height: calc(100svh - 32px);
                grid-template-columns: 1fr;
                grid-template-rows: minmax(280px, 34svh) auto;
            }

            .poster {
                min-height: 0;
            }

            .panel {
                grid-template-rows: auto auto auto auto;
                min-height: 0;
                overflow: visible;
            }
        }

        @media (max-width: 760px) {
            body {
                padding: 10px;
                overflow-y: auto;
            }

            .shell {
                height: auto;
                min-height: calc(100svh - 20px);
                grid-template-rows: minmax(250px, 31svh) auto;
            }

            .poster {
                padding: 18px 18px 16px;
            }

            .poster::after {
                font-size: 118px;
                right: 10px;
                bottom: -6px;
            }

            .poster-top {
                gap: 10px;
            }

            .poster-badge {
                padding: 8px 10px;
                font-size: 11px;
                letter-spacing: 0.08em;
            }

            .poster-code {
                font-size: 10px;
            }

            .poster-stamp {
                top: auto;
                right: 0;
                bottom: 6px;
                transform: rotate(0deg);
                font-size: 11px;
                padding: 6px 10px;
            }

            .poster-title {
                margin-top: 12px;
                font-size: clamp(40px, 14vw, 58px);
            }

            .poster-lead {
                margin-top: 10px;
                font-size: 16px;
                line-height: 1.45;
            }

            .poster-story {
                margin-top: 10px;
                font-size: 13px;
                line-height: 1.7;
                max-width: 100%;
            }

            .poster-points {
                margin-top: 12px;
                gap: 8px;
            }

            .poster-point {
                padding: 8px 10px;
                font-size: 12px;
            }

            .poster-notice,
            .poster-meta {
                width: 100%;
            }

            .poster-notice {
                padding: 10px 12px;
                font-size: 12px;
                line-height: 1.7;
            }

            .poster-meta {
                font-size: 10px;
                flex-direction: column;
                align-items: flex-start;
                gap: 4px;
            }

            .panel {
                padding: 16px 16px 14px;
                gap: 10px;
                overflow: visible;
                grid-template-rows: auto auto auto auto;
            }

            .panel-header {
                padding-bottom: 10px;
            }

            .panel-header p {
                margin-top: 8px;
                font-size: 12px;
                line-height: 1.55;
            }

            .field-grid,
            .gender-row {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .login-form {
                gap: 10px;
            }

            .field-block label,
            .field-title {
                margin-bottom: 5px;
                font-size: 12px;
            }

            .field-input,
            .field-select,
            .captcha-image,
            .gender-option,
            .btn {
                height: 44px;
                font-size: 14px;
            }

            .captcha-row {
                grid-template-columns: minmax(0, 1fr) 124px;
            }

            .action-row {
                grid-template-columns: minmax(0, 1fr) 110px;
            }

            .panel-footer {
                gap: 4px;
                font-size: 11px;
                line-height: 1.5;
            }

            .site-credit {
                font-size: 12px;
            }
        }

        @media (max-height: 820px) and (min-width: 761px) {
            .poster {
                padding: 22px 24px 18px;
            }

            .poster-title {
                font-size: clamp(46px, 5vw, 72px);
            }

            .poster-lead {
                font-size: 18px;
            }

            .poster-story {
                margin-top: 14px;
                font-size: 14px;
                line-height: 1.75;
            }

            .poster-points {
                margin-top: 16px;
            }

            .panel {
                padding: 18px 18px 14px;
                gap: 10px;
            }

            .panel-header h2 {
                font-size: 36px;
            }

            .field-input,
            .field-select,
            .captcha-image,
            .gender-option,
            .btn {
                height: 44px;
            }
        }

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

<body>
    <main class="shell">
        <section class="poster">
            <div class="poster-top">
                <div class="poster-badge">
                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                        <path d="M12 3L14.6 8.27L20.42 9.11L16.21 13.22L17.21 19L12 16.26L6.79 19L7.79 13.22L3.58 9.11L9.4 8.27L12 3Z" fill="currentColor" />
                    </svg>
                    Veteran Reunion Channel
                </div>
                <div class="poster-code">
                    <div>FILE NO. HC-093</div>
                    <div>RETURN TO CHANNEL</div>
                </div>
            </div>

            <div class="poster-main">
                <div class="poster-copy">
                    <div class="poster-kicker">退伍不褪色 · 离队不离心</div>
                    <h1 class="poster-title">{{ $systemName }}</h1>
                    <p class="poster-lead">这是一个给复原老兵的聊天室，不追求花哨，只留下熟悉的劲头和说话方式。</p>
                    <p class="poster-story">
                        从军营里建立，到回地方后重新用 PHP 写回来。战友进来，不是游客，是归队。
                    </p>
                    <div class="poster-points">
                        <span class="poster-point">军旅记忆</span>
                        <span class="poster-point">战友情义</span>
                        <span class="poster-point">老兵归队</span>
                    </div>
                </div>
                <div class="poster-stamp">AUTHORIZED VETERAN</div>
            </div>

            <div class="poster-bottom">
                <div class="poster-notice">{{ $systemNotice }}</div>
                <div class="poster-meta">
                    <span>左侧主视觉已固定为你提供的图片，并做了轻度清晰度增强处理。</span>
                    <span>首页当前只使用这一张图。</span>
                </div>
            </div>
        </section>

        <section class="panel">
            <div class="panel-header">
                <small>VETERAN ACCESS FORM</small>
                <h2>战友登录</h2>
                <p>主视觉已固定，验证通过后直接进入房间。</p>
            </div>

            <div
                id="alert-box"
                aria-live="polite"
                class="{{ $flashType === 'success' ? 'alert-success' : ($flashType === 'error' ? 'alert-error' : '') }}"
                style="display: {{ $flashMessage ? 'block' : 'none' }};"
            >{{ $flashMessage }}</div>

            <form id="login-form" class="login-form">
                <div class="field-grid">
                    <div class="field-block">
                        <label for="username"><span class="field-index">01</span>昵称</label>
                        <input class="field-input" type="text" id="username" name="username" maxlength="10" placeholder="中英文、数字、下划线" required>
                    </div>
                    <div class="field-block">
                        <label for="password"><span class="field-index">02</span>密码</label>
                        <input class="field-input" type="password" id="password" name="password" maxlength="20" placeholder="请输入密码" required>
                    </div>
                </div>

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

                <div class="field-block">
                    <div class="field-title"><span class="field-index">04</span>性别</div>
                    <div class="gender-row">
                        <label class="gender-option selected">
                            <input type="radio" name="bSex" value="1" checked>
                            男
                        </label>
                        <label class="gender-option">
                            <input type="radio" name="bSex" value="2">
                            女
                        </label>
                    </div>
                </div>

                <div class="field-block">
                    <label for="room_id"><span class="field-index">05</span>选择房间</label>
                    <select class="field-select" id="room_id" name="room_id" {{ $roomCount === 0 ? 'disabled' : '' }}>
                        @forelse ($rooms as $room)
                            <option value="{{ $room->id }}" data-room-name="{{ $room->name }}" data-room-owner="{{ $room->master ?: '未设置' }}" {{ $loop->first ? 'selected' : '' }}>
                                {{ $room->name }}
                            </option>
                        @empty
                            <option value="">暂无可用房间</option>
                        @endforelse
                    </select>
                    <div id="room-hint" class="room-hint">
                        @if ($defaultRoom)
                            当前房间：{{ $defaultRoom->name }} / 房主：{{ $defaultRoom->master ?: '未设置' }}
                        @else
                            当前暂无可用房间，请联系管理员。
                        @endif
                    </div>
                </div>

                <div class="action-row">
                    <button type="submit" id="submit-btn" class="btn btn-primary" {{ $roomCount === 0 ? 'disabled' : '' }}>进入和平聊吧</button>
                    <button type="reset" class="btn btn-secondary">重填</button>
                </div>
            </form>

            <div class="panel-footer">
                <div>第一次登录即为注册，请妥善保管密码。当前共 {{ $roomCount }} 个房间。</div>
                @if ($smtpEnabled)
                    <div><a href="{{ route('password.request') }}">忘了密码？点击通过邮箱找回</a></div>
                @endif
                <div>
                    推荐浏览器：
                    <a href="https://www.microsoft.com/zh-cn/edge/download" target="_blank" rel="noopener noreferrer">Edge</a>
                    /
                    <a href="https://www.google.com/chrome/" target="_blank" rel="noopener noreferrer">Chrome</a>
                </div>
                <div class="site-credit">POWERED BY 流星 · {{ date('Y') }}</div>
            </div>
        </section>
    </main>

    <script>
        function refreshCaptcha() {
            document.getElementById('captcha-img').src = '/captcha/default?' + Math.random();
        }

        function syncSelectedState() {
            document.querySelectorAll('.gender-option').forEach(function(option) {
                const input = option.querySelector('input[type="radio"]');
                option.classList.toggle('selected', Boolean(input && input.checked));
            });
        }

        function updateRoomHint() {
            const roomSelect = document.getElementById('room_id');
            const hint = document.getElementById('room-hint');

            if (!roomSelect || !hint || roomSelect.selectedIndex < 0) {
                return;
            }

            const selectedOption = roomSelect.options[roomSelect.selectedIndex];
            const roomName = selectedOption.getAttribute('data-room-name') || selectedOption.text;
            const roomOwner = selectedOption.getAttribute('data-room-owner') || '未设置';

            hint.textContent = '当前房间：' + roomName + ' / 房主：' + roomOwner;
        }

        document.querySelectorAll('.gender-option input[type="radio"]').forEach(function(input) {
            input.addEventListener('change', syncSelectedState);
        });

        const roomSelect = document.getElementById('room_id');
        if (roomSelect) {
            roomSelect.addEventListener('change', updateRoomHint);
        }

        syncSelectedState();
        updateRoomHint();

        document.getElementById('login-form').addEventListener('submit', function(event) {
            event.preventDefault();

            const button = document.getElementById('submit-btn');
            const formData = new FormData(this);
            const data = Object.fromEntries(formData.entries());
            const roomId = data.room_id || '1';

            button.disabled = true;
            button.innerText = '正在进入...';
            showAlert('', 'error', false);

            fetch('{{ route('login.post') }}', {
                method: 'POST',
                credentials: 'same-origin',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json',
                },
                body: JSON.stringify(data),
            })
                .then(function(response) {
                    return response.json().then(function(body) {
                        return {
                            status: response.status,
                            body: body,
                        };
                    });
                })
                .then(function(result) {
                    if (result.status === 419 || (result.body && result.body.message === 'CSRF token mismatch.')) {
                        showAlert('安全令牌已过期，正在刷新页面...', 'error', true);
                        setTimeout(function() {
                            window.location.reload();
                        }, 1500);
                        return;
                    }

                    if (result.status === 200 && result.body.status === 'success') {
                        showAlert(result.body.message, 'success', true);
                        const chatUrl = '/room/' + roomId;
                        const chatWindow = window.open(
                            chatUrl,
                            'chatroom',
                            'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes'
                        );

                        if (chatWindow) {
                            chatWindow.moveTo(0, 0);
                            chatWindow.resizeTo(screen.availWidth, screen.availHeight);
                            chatWindow.focus();
                        }

                        setTimeout(function() {
                            window.location.href = '/rooms';
                        }, 1500);
                    } else {
                        const errorMessage =
                            result.body.message ||
                            (result.body.errors ? Object.values(result.body.errors)[0][0] : '登录失败，请稍后再试。');
                        showAlert(errorMessage, 'error', true);
                        refreshCaptcha();
                        document.getElementById('captcha').value = '';
                        button.disabled = false;
                        button.innerText = '进入和平聊吧';
                    }
                })
                .catch(function() {
                    showAlert('网络或服务器异常，请稍后再试。', 'error', true);
                    refreshCaptcha();
                    button.disabled = false;
                    button.innerText = '进入和平聊吧';
                });
        });

        function showAlert(message, type, visible) {
            const alertBox = document.getElementById('alert-box');
            alertBox.textContent = message;
            alertBox.className = type === 'success' ? 'alert-success' : 'alert-error';
            alertBox.id = 'alert-box';
            alertBox.style.display = visible ? 'block' : 'none';
        }
    </script>
</body>

</html>
