{{--
    文件功能：聊天室登录/注册首页（复刻原版 DEFAULT.asp 风格）
    包含房间选择、性别选择，登录后弹出独立窗口直接进入聊天
--}}
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ \App\Models\SysParam::where('alias', 'sys_name')->value('body') ?? '飘落的流星在线聊天' }}</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "宋体", SimSun, "Microsoft YaHei", sans-serif;
            font-size: 12px;
            background: #c0d8ef;
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        /* 居中卡片 */
        .login-card {
            width: 720px;
            border: 1px solid #8aaccf;
            border-radius: 5px;
            overflow: hidden;
            box-shadow: 2px 3px 12px rgba(0, 0, 0, 0.18);
        }

        /* 标题栏 */
        .card-header {
            background: linear-gradient(180deg, #3a6fa0, #2a5580);
            color: #fff;
            text-align: center;
            padding: 12px 0 10px;
            font-size: 18px;
            font-weight: bold;
            letter-spacing: 3px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }

        /* 公告条 */
        .notice-bar {
            background: #fffde0;
            border-bottom: 1px solid #e8d88e;
            padding: 4px 10px;
            font-size: 12px;
            color: #996600;
            text-align: center;
        }

        /* 内容区：左右分栏 */
        .card-body {
            display: flex;
        }

        /* 左侧：登录表单 */
        .login-left {
            flex: 1;
            background: #eef5ff;
            padding: 24px 30px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .section-title {
            font-size: 13px;
            font-weight: bold;
            color: #2a5580;
            border-bottom: 1px solid #b8d0e8;
            padding-bottom: 6px;
            margin-bottom: 14px;
        }

        .form-row {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }

        .form-label {
            width: 50px;
            text-align: right;
            font-size: 12px;
            color: #336699;
            font-weight: bold;
            padding-right: 8px;
            flex-shrink: 0;
        }

        .form-input {
            flex: 1;
            padding: 5px 8px;
            height: 32px;
            border: 1px solid #aaa;
            border-radius: 3px;
            font-size: 12px;
            color: #333;
            background: #fff;
            max-width: 200px;
        }

        .form-input:focus {
            border-color: #336699;
            outline: none;
            box-shadow: 0 0 3px rgba(51, 102, 153, 0.3);
        }

        .gender-row {
            display: flex;
            align-items: center;
            gap: 20px;
            margin: 6px 0 14px;
            padding-left: 58px;
            font-size: 12px;
        }

        .gender-row label {
            cursor: pointer;
            color: #336699;
            display: flex;
            align-items: center;
            gap: 3px;
        }

        .captcha-wrap {
            display: flex;
            align-items: center;
            flex: 1;
            gap: 6px;
        }

        .captcha-wrap input {
            width: 80px;
            flex: none;
            height: 32px;
        }

        .captcha-wrap img {
            height: 32px;
            cursor: pointer;
            border: 1px solid #aaa;
            border-radius: 3px;
        }

        .btn-row {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 16px;
        }

        .btn {
            padding: 6px 24px;
            border: 1px solid #999;
            border-radius: 3px;
            background: linear-gradient(180deg, #f8f8f8, #e0e0e0);
            color: #333;
            font-size: 12px;
            cursor: pointer;
        }

        .btn:hover {
            background: linear-gradient(180deg, #e8e8e8, #d0d0d0);
        }

        .btn-primary {
            background: linear-gradient(180deg, #4a8cc5, #336699);
            color: #fff;
            border-color: #2a5580;
            font-weight: bold;
        }

        .btn-primary:hover {
            background: linear-gradient(180deg, #3a7cb5, #2a5a88);
        }

        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .link-row {
            text-align: center;
            margin-top: 10px;
            font-size: 11px;
            color: #999;
        }

        .alert {
            display: none;
            padding: 6px 10px;
            margin-bottom: 10px;
            border-radius: 3px;
            font-size: 12px;
            text-align: center;
        }

        .alert-error {
            background: #fde8e8;
            color: #cc0000;
            border: 1px solid #f5c0c0;
        }

        .alert-success {
            background: #e8fde8;
            color: #006600;
            border: 1px solid #c0f5c0;
        }

        /* 右侧：房间列表 */
        .login-right {
            width: 250px;
            background: #f0f6ff;
            border-left: 1px solid #b8d0e8;
            display: flex;
            flex-direction: column;
        }

        .room-header {
            background: #d8e8f5;
            color: #336699;
            font-size: 12px;
            font-weight: bold;
            padding: 7px 10px;
            text-align: center;
            border-bottom: 1px solid #b8d0e8;
        }

        .room-list {
            flex: 1;
            overflow-y: auto;
        }

        .room-item {
            display: flex;
            align-items: center;
            padding: 6px 10px;
            cursor: pointer;
            border-bottom: 1px solid #e0ecf7;
            font-size: 12px;
            transition: background 0.15s;
        }

        .room-item:hover {
            background: #dde8ff;
        }

        .room-item.selected {
            background: #d0e4f5;
            color: #1a4a70;
        }

        .room-item input[type="radio"] {
            margin-right: 8px;
            flex-shrink: 0;
        }

        .room-info {
            flex: 1;
            min-width: 0;
        }

        .room-name {
            font-weight: bold;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .room-owner {
            font-size: 11px;
            color: #8aaccf;
            display: block;
        }

        .room-item.selected .room-owner {
            color: #b8d0e8;
        }

        .room-footer {
            background: #e0ecf7;
            padding: 5px 10px;
            font-size: 11px;
            color: #666;
            text-align: center;
            border-top: 1px solid #b8d0e8;
        }

        /* 底部版权 */
        .card-footer {
            text-align: center;
            padding: 6px;
            font-size: 11px;
            color: #7a9fc0;
            background: #e0ecf7;
            border-top: 1px solid #b8d0e8;
        }
    </style>
</head>

<body>
    <div class="login-card">
        {{-- 标题 --}}
        <div class="card-header">
            {{ \App\Models\SysParam::where('alias', 'sys_name')->value('body') ?? '飘落的流星在线聊天' }}
        </div>

        {{-- 公告 --}}
        <div class="notice-bar">
            {{ \App\Models\SysParam::where('alias', 'sys_notice')->value('body') ?? '欢迎来到聊天室！第一次登录即为注册，请记住您的密码。' }}
        </div>

        {{-- 内容区 --}}
        <form id="login-form">
            <div class="card-body">
                {{-- 左侧：登录表单 --}}
                <div class="login-left">
                    <div class="section-title">🔑 用户登录</div>
                    <div id="alert-box" class="alert"></div>

                    <div class="form-row">
                        <span class="form-label">昵称:</span>
                        <input type="text" id="username" name="username" class="form-input" maxlength="10"
                            placeholder="中英文、数字、下划线" required>
                    </div>

                    <div class="form-row">
                        <span class="form-label">密码:</span>
                        <input type="password" id="password" name="password" class="form-input" maxlength="20"
                            placeholder="请输入密码" required>
                    </div>

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

                    <div class="gender-row">
                        <label><input type="radio" name="bSex" value="1" checked> 男</label>
                        <label><input type="radio" name="bSex" value="2"> 女</label>
                    </div>

                    <div class="btn-row">
                        <button type="submit" id="submit-btn" class="btn btn-primary">进入聊天</button>
                        <button type="reset" class="btn">重填</button>
                    </div>

                    <div class="link-row">
                        第一次登录即为注册，请记住您的密码
                        @if (\App\Models\SysParam::where('alias', 'smtp_enabled')->value('body') === '1')
                            <div style="margin-top: 8px;">
                                <a href="javascript:alert('邮箱找回密码业务即将上线...');"
                                    style="color: #336699; text-decoration: none;">忘了密码？点击通过邮箱找回</a>
                            </div>
                        @endif
                    </div>

                    {{-- 推荐浏览器提示 --}}
                    <div style="margin-top: 10px; font-size: 11px; color: #888; text-align: center;">
                        🌐 推荐
                        <a href="https://www.microsoft.com/zh-cn/edge/download" target="_blank"
                            style="color: #1565c0; text-decoration: none;">Edge</a>
                        /
                        <a href="https://www.google.com/chrome/" target="_blank"
                            style="color: #c0392b; text-decoration: none;">Chrome</a>
                        浏览器，IE 等旧版不支持聊天室
                    </div>
                </div>

                {{-- 右侧：房间列表 --}}
                <div class="login-right">
                    <div class="room-header">📋 选择房间</div>
                    <div class="room-list">
                        @forelse ($rooms as $room)
                            <label class="room-item {{ $loop->first ? 'selected' : '' }}">
                                <input type="radio" name="room_id" value="{{ $room->id }}"
                                    {{ $loop->first ? 'checked' : '' }}>
                                <div class="room-info">
                                    <span class="room-name">{{ $room->name }}</span>
                                    @if ($room->master)
                                        <span class="room-owner">房主：{{ $room->master }}</span>
                                    @endif
                                </div>
                            </label>
                        @empty
                            <div style="padding: 20px; text-align: center; color: #999;">暂无房间</div>
                        @endforelse
                    </div>
                    <div class="room-footer">共 {{ count($rooms) }} 个房间</div>
                </div>
            </div>
        </form>

        {{-- 底部 --}}
        <div class="card-footer">Powered by 飘落的流星 &copy; {{ date('Y') }}</div>
    </div>

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

        document.querySelectorAll('.room-item').forEach(item => {
            item.addEventListener('click', function() {
                document.querySelectorAll('.room-item').forEach(i => i.classList.remove('selected'));
                this.classList.add('selected');
            });
        });

        document.getElementById('login-form').addEventListener('submit', function(e) {
            e.preventDefault();
            const btn = document.getElementById('submit-btn');
            const alertBox = document.getElementById('alert-box');
            btn.disabled = true;
            btn.innerText = '正在进入...';
            alertBox.style.display = 'none';

            const formData = new FormData(this);
            const data = Object.fromEntries(formData.entries());
            const roomId = data.room_id || '1';

            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(response => response.json().then(body => ({
                    status: response.status,
                    body
                })))
                .then(result => {
                    if (result.status === 200 && result.body.status === 'success') {
                        showAlert(result.body.message, 'success');
                        const chatUrl = '/room/' + roomId;
                        const chatWin = window.open(chatUrl, 'chatroom',
                            'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes'
                        );
                        if (chatWin) {
                            chatWin.moveTo(0, 0);
                            chatWin.resizeTo(screen.availWidth, screen.availHeight);
                            chatWin.focus();
                        }
                        setTimeout(() => {
                            window.location.href = '/rooms';
                        }, 1500);
                    } else {
                        const errorMsg = result.body.message ||
                            (result.body.errors ? Object.values(result.body.errors)[0][0] : '登录失败');
                        showAlert(errorMsg, 'error');
                        refreshCaptcha();
                        document.getElementById('captcha').value = '';
                        btn.disabled = false;
                        btn.innerText = '进入聊天';
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showAlert('网络或服务器错误，请稍后再试。', 'error');
                    refreshCaptcha();
                    btn.disabled = false;
                    btn.innerText = '进入聊天';
                });
        });

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

</html>
