{{--
    文件功能：用户反馈模态弹窗（仿留言板弹窗样式）
    供聊天室工具栏"反馈"按钮使用，替代跳转反馈页面。

    依赖 CSS：与留言板弹窗一致的蓝白风格
    依赖 JS：resources/js/chat-room/feedback.js
--}}

<style>
    /* 反馈弹窗遮罩 */
    #feedback-modal {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 9999;
        justify-content: center;
        align-items: center;
    }

    /* 弹窗主体 */
    #feedback-modal-inner {
        background: #fff;
        border-radius: 8px;
        width: 720px;
        max-width: 95vw;
        max-height: 84vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
        overflow: hidden;
        position: relative;
    }

    /* 标题栏 */
    #feedback-modal-header {
        background: linear-gradient(135deg, #336699, #5a8fc0);
        color: #fff;
        padding: 10px 16px;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }

    #feedback-modal-title {
        font-size: 14px;
        font-weight: bold;
        flex: 1;
    }

    #feedback-modal-close {
        cursor: pointer;
        font-size: 18px;
        opacity: .8;
        transition: opacity .15s;
        line-height: 1;
    }

    #feedback-modal-close:hover {
        opacity: 1;
    }

    /* Toast */
    #feedback-toast {
        display: none;
        margin: 6px 12px 0;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: bold;
        flex-shrink: 0;
    }

    /* Tab 导航 */
    #feedback-tabs {
        display: flex;
        border-bottom: 1px solid #cde;
        flex-shrink: 0;
        background: #eef4fb;
    }
    .feedback-tab {
        flex: 1;
        padding: 8px 6px;
        background: transparent;
        border: none;
        color: #6b7280;
        font-size: 12px;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        font-weight: bold;
        transition: all .2s;
    }
    .feedback-tab.active { color: #336699 !important; border-bottom-color: #336699 !important; }
    .feedback-tab:hover { color: #5a8fc0; }

    /* 反馈列表容器 */
    #feedback-list {
        flex: 1;
        overflow-y: auto;
        padding: 10px 12px;
        background: #f6faff;
    }

    /* 反馈卡片 */
    .fb-card {
        background: #fff;
        border: 1px solid #d0e4f5;
        border-radius: 6px;
        padding: 10px 12px;
        margin-bottom: 8px;
        transition: border-color .2s, box-shadow .2s;
        cursor: pointer;
    }
    .fb-card:hover {
        border-color: #5a8fc0;
        box-shadow: 0 2px 8px rgba(51, 102, 153, .18);
    }

    .fb-card-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
        flex-wrap: wrap;
    }

    .fb-type-badge {
        font-size: 10px;
        font-weight: bold;
        padding: 1px 6px;
        border-radius: 8px;
        flex-shrink: 0;
    }
    .fb-type-badge.bug { background: #ffe4e6; color: #be123c; }
    .fb-type-badge.suggestion { background: #dbeafe; color: #1d4ed8; }

    .fb-status-badge {
        font-size: 10px;
        font-weight: bold;
        padding: 1px 6px;
        border-radius: 8px;
        flex-shrink: 0;
    }

    .fb-vote-count {
        font-size: 11px;
        color: #6b7280;
        flex-shrink: 0;
    }

    .fb-reply-count {
        font-size: 11px;
        color: #6b7280;
        flex-shrink: 0;
        margin-left: auto;
    }

    .fb-card-title {
        font-size: 13px;
        font-weight: bold;
        color: #225588;
        margin-bottom: 4px;
        line-height: 1.4;
        word-break: break-word;
    }

    .fb-card-meta {
        font-size: 11px;
        color: #9ca3af;
    }

    /* 展开详情区 */
    .fb-detail {
        border-top: 1px solid #eef4fb;
        padding: 10px 0 0;
        margin-top: 8px;
    }

    .fb-detail-content {
        font-size: 12px;
        color: #374151;
        line-height: 1.6;
        word-break: break-word;
        white-space: pre-wrap;
        padding: 6px 0 8px;
    }

    .fb-admin-remark {
        background: #eef4fb;
        border-left: 3px solid #336699;
        padding: 8px 10px;
        border-radius: 4px;
        margin-bottom: 8px;
        font-size: 12px;
        color: #225588;
        line-height: 1.5;
        white-space: pre-wrap;
    }
    .fb-admin-remark-label {
        font-weight: bold;
        font-size: 11px;
        color: #336699;
        margin-bottom: 4px;
    }

    /* 评论列表 */
    .fb-replies {
        margin-bottom: 8px;
    }
    .fb-reply-item {
        background: #f6faff;
        border-radius: 4px;
        padding: 6px 8px;
        margin-bottom: 4px;
        font-size: 12px;
    }
    .fb-reply-item.admin {
        background: #eef4fb;
        border: 1px solid #cde;
    }
    .fb-reply-header {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 3px;
        font-size: 11px;
    }
    .fb-reply-username {
        font-weight: bold;
        color: #336699;
    }
    .fb-reply-admin-badge {
        font-size: 10px;
        background: #336699;
        color: #fff;
        padding: 0 5px;
        border-radius: 6px;
        font-weight: bold;
    }
    .fb-reply-time {
        color: #9ca3af;
        margin-left: auto;
    }
    .fb-reply-body {
        color: #374151;
        white-space: pre-wrap;
        line-height: 1.5;
    }

    /* 评论输入区 */
    .fb-reply-form {
        display: flex;
        gap: 6px;
        margin-bottom: 6px;
    }
    .fb-reply-form textarea {
        flex: 1;
        padding: 5px 8px;
        border: 1px solid #cde;
        border-radius: 4px;
        font-size: 11px;
        outline: none;
        resize: vertical;
        min-height: 32px;
        max-height: 80px;
        box-sizing: border-box;
    }
    .fb-reply-form textarea:focus {
        border-color: #336699;
    }
    .fb-reply-form button {
        padding: 5px 10px;
        background: linear-gradient(135deg, #336699, #5a8fc0);
        color: #fff;
        border: none;
        border-radius: 4px;
        font-size: 11px;
        font-weight: bold;
        cursor: pointer;
        transition: opacity .15s;
        white-space: nowrap;
        align-self: flex-end;
    }
    .fb-reply-form button:hover { opacity: .85; }
    .fb-reply-form button:disabled { opacity: .4; cursor: default; }

    /* 删除按钮 */
    .fb-delete-btn {
        font-size: 10px;
        color: #dc2626;
        background: #fee2e2;
        border: 1px solid #fecaca;
        border-radius: 4px;
        padding: 2px 8px;
        cursor: pointer;
        font-weight: bold;
        transition: opacity .15s;
    }
    .fb-delete-btn:hover { opacity: .75; }

    /* 卡片底部操作区 */
    .fb-card-footer-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 6px;
        flex-wrap: wrap;
    }
    .fb-vote-btn {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        font-size: 11px;
        font-weight: bold;
        padding: 2px 8px;
        border: 1px solid #cde;
        border-radius: 4px;
        background: #f6faff;
        color: #6b7280;
        cursor: pointer;
        transition: all .15s;
    }
    .fb-vote-btn:hover {
        border-color: #5a8fc0;
        color: #336699;
        background: #eef4fb;
    }
    .fb-vote-btn.voted {
        background: #336699;
        color: #fff;
        border-color: #336699;
    }
    .fb-vote-btn.voted:hover {
        opacity: .85;
    }
    .fb-vote-btn:disabled {
        opacity: .4;
        cursor: default;
    }

    /* 底部操作区 */
    #feedback-bottom-bar {
        flex-shrink: 0;
        padding: 8px 12px;
        background: #eef4fb;
        border-top: 1px solid #cde;
        text-align: center;
    }
    #feedback-submit-btn {
        background: linear-gradient(135deg, #336699, #5a8fc0);
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 7px 20px;
        font-size: 13px;
        font-weight: bold;
        cursor: pointer;
        transition: opacity .15s;
        width: 100%;
    }
    #feedback-submit-btn:hover { opacity: .85; }

    /* 空状态 */
    .fb-empty {
        text-align: center;
        color: #9ca3af;
        padding: 40px 0;
        font-size: 13px;
    }
    .fb-empty-icon {
        font-size: 36px;
        display: block;
        margin-bottom: 10px;
    }

    /* 加载中 */
    .fb-loading {
        text-align: center;
        color: #6366f1;
        padding: 30px 0;
        font-size: 13px;
    }

    /* 加载更多指示 */
    #feedback-loader {
        text-align: center;
        padding: 10px 0;
        font-size: 12px;
        color: #9ca3af;
    }
    #feedback-loader.hidden { display: none; }

    /* ── 提交反馈表单（内嵌弹窗） ── */
    #feedback-write-overlay {
        display: none;
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.35);
        z-index: 10;
        justify-content: center;
        align-items: center;
    }
    #feedback-write-overlay.active { display: flex; }

    #feedback-write-panel {
        background: #fff;
        border-radius: 8px;
        width: 500px;
        max-width: 90vw;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 8px 32px rgba(0,0,0,.3);
        overflow: hidden;
    }

    #feedback-write-header {
        background: linear-gradient(135deg, #336699, #5a8fc0);
        color: #fff;
        padding: 10px 16px;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }
    #feedback-write-title {
        font-size: 14px;
        font-weight: bold;
        flex: 1;
    }
    #feedback-write-close {
        cursor: pointer;
        font-size: 18px;
        opacity: .8;
        transition: opacity .15s;
        line-height: 1;
    }
    #feedback-write-close:hover { opacity: 1; }

    #feedback-write-body {
        padding: 12px 16px;
        overflow-y: auto;
        flex: 1;
    }

    .fb-form-row {
        margin-bottom: 10px;
    }
    .fb-form-row label {
        display: block;
        font-size: 12px;
        font-weight: bold;
        color: #336699;
        margin-bottom: 4px;
    }
    .fb-form-row select,
    .fb-form-row input[type="text"],
    .fb-form-row textarea {
        width: 100%;
        padding: 6px 8px;
        border: 1px solid #cde;
        border-radius: 4px;
        font-size: 12px;
        outline: none;
        transition: border-color .2s;
        box-sizing: border-box;
    }
    .fb-form-row select:focus,
    .fb-form-row input[type="text"]:focus,
    .fb-form-row textarea:focus {
        border-color: #336699;
    }
    .fb-form-row textarea {
        resize: vertical;
        min-height: 80px;
    }

    .fb-form-actions {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
        padding-top: 4px;
    }
    .fb-form-actions button {
        padding: 5px 14px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: bold;
        cursor: pointer;
        border: none;
        transition: opacity .15s;
    }
    .fb-form-actions button:hover { opacity: .85; }
    .fb-form-actions button:disabled { opacity: .4; cursor: default; }
    .fb-form-submit {
        background: linear-gradient(135deg, #336699, #5a8fc0);
        color: #fff;
    }
    .fb-form-cancel {
        background: #e5e7eb;
        color: #555;
    }
</style>

<div id="feedback-modal"
     data-feedback-data-url="{{ route('feedback.data') }}"
     data-feedback-more-url="{{ route('feedback.more') }}"
     data-feedback-store-url="{{ route('feedback.store') }}"
     data-feedback-vote-url-template="{{ route('feedback.vote', '__ID__') }}"
     data-feedback-reply-url-template="{{ route('feedback.reply', '__ID__') }}"
     data-feedback-destroy-url-template="{{ route('feedback.destroy', '__ID__') }}">
    <div id="feedback-modal-inner">
        {{-- 标题栏 --}}
        <div id="feedback-modal-header">
            <div id="feedback-modal-title">💬 用户反馈</div>
            <span id="feedback-modal-close" data-feedback-modal-close>✕</span>
        </div>

        {{-- Toast --}}
        <div id="feedback-toast"></div>

        {{-- Tab 导航 --}}
        <div id="feedback-tabs">
            <button class="feedback-tab active" data-feedback-tab="all">📋 全部</button>
            <button class="feedback-tab" data-feedback-tab="bug">🐛 Bug 报告</button>
            <button class="feedback-tab" data-feedback-tab="suggestion">💡 功能建议</button>
        </div>

        {{-- 反馈列表 --}}
        <div id="feedback-list">
            <div class="fb-loading">加载中…</div>
        </div>

        {{-- 加载更多指示 --}}
        <div id="feedback-loader" class="hidden"></div>

        {{-- 底部提交按钮 --}}
        <div id="feedback-bottom-bar">
            <button id="feedback-submit-btn" data-feedback-write-btn>📝 提交反馈</button>
        </div>

        {{-- 提交反馈表单（内嵌遮罩弹窗） --}}
        <div id="feedback-write-overlay">
            <div id="feedback-write-panel">
                <div id="feedback-write-header">
                    <div id="feedback-write-title">📝 提交反馈</div>
                    <span id="feedback-write-close" data-feedback-write-close>✕</span>
                </div>
                <div id="feedback-write-body">
                    <form id="feedback-form" method="POST">
                        @csrf
                        <div class="fb-form-row">
                            <label>反馈类型 <span style="color:#dc2626;">*</span></label>
                            <select name="type" id="fb-type">
                                <option value="bug">🐛 Bug 报告</option>
                                <option value="suggestion">💡 功能建议</option>
                            </select>
                        </div>
                        <div class="fb-form-row">
                            <label>标题 <span style="color:#dc2626;">*</span></label>
                            <input type="text" name="title" id="fb-title" maxlength="200" placeholder="一句话描述…" required>
                        </div>
                        <div class="fb-form-row">
                            <label>详细描述 <span style="color:#dc2626;">*</span></label>
                            <textarea name="content" id="fb-content" rows="5" maxlength="2000" required placeholder="请详细描述您遇到的问题或建议…"></textarea>
                        </div>
                        <div class="fb-form-actions">
                            <button type="button" class="fb-form-cancel" data-fb-form-cancel>取消</button>
                            <button type="submit" class="fb-form-submit">✈️ 提交反馈</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>