{{-- View Card Modal --}}
<div class="modal fade" id="viewCardModal" tabindex="-1" aria-labelledby="viewCardModalLabel" aria-hidden="true"
    data-modal-version="3.0">
    <div class="modal-dialog modal-dialog-centered" id="viewCardModalDialog" style="height: 90vh; max-width: 80vw;">
        <div class="modal-content position-relative view-card-modal-content" id="viewCardModalContent"
            style="height: 90vh;">
            {{-- Loading Overlay - Covers entire modal --}}
            <div id="cardModalLoading" class="loading-overlay d-none">
                <div class="loading-content">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            </div>

            <div class="modal-header bg-primary justify-content-center position-relative">
                <span class="badge bg-warning text-dark position-absolute text-white"
                    style="left: 1rem; font-size: 0.75rem; padding: 0.4rem 0.8rem;">
                    <i class="fas fa-lock me-1"></i>MODE BACA
                </span>
                <h5 class="modal-title fw-bold text-white" id="viewCardModalLabel">
                    View Card
                </h5>
                <button type="button" class="btn-close text-white position-absolute" style="right: 1rem;"
                    data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0">

                {{-- Main Content --}}
                <div id="cardModalContent" class="row g-0" style="height: 100%;">
                    {{-- Left Column - Card Details --}}
                    <div class="col-md-7 p-4" style="overflow-y: auto; max-height: 100%;">
                        <div class="mb-4">
                            <h6 class="text-center view-card-priority" id="cardPriority"
                                style="background: #1890FF; color: #ffffff;">NORMAL</h6>
                        </div>
                        <div class="mb-4">
                            <h5 class="w-bold ms-1 mb-2 text-uppercase" id="cardUser">User</h5>
                            <h5 class="view-card-title-input mb-2" style="color: #000" id="cardTitle">Card title</h5>
                        </div>
                        <div class="mb-4">
                            <div class="row">
                                <div class="col-md-4">
                                    <label class="fw-bold mb-2">Dibuat pada</label>
                                    <div class="input-group">
                                        <input type="date" class="form-control view-card-form-input"
                                            id="cardCreatedAt" disabled>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label class="fw-bold mb-2">Deadline</label>
                                    <div class="input-group">
                                        <input type="date" class="form-control view-card-form-input"
                                            id="cardDueDate">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mb-4">
                            <label class="fw-bold mb-2">Deskripsi</label>
                            <textarea id="cardDescriptionEditor" class="form-control view-card-form-input" style="min-height:120px;"></textarea>
                        </div>
                        <div class="mb-4">
                            <label class="fw-bold mb-2">Field kustom</label>
                            <div id="viewCustomFieldsContainer"></div>

                            {{-- Edit Custom Field Dropdown --}}
                            <div id="viewEditCustomFieldDropdown" class="dropdown-menu py-0"
                                style="width: 350px; display: none;">
                                <div class="dropdown-header text-center">
                                    <h5 class="dropdown-title fw-bold mt-2">Ubah Field Kustom</h5>
                                </div>
                                <div class="dropdown-content pb-0 p-3">
                                    <div class="mb-3">
                                        <h6 class="dropdown-label text-dark mb-2">Nama field</h6>
                                        <input type="text" class="form-control" id="viewEditCustomFieldName"
                                            placeholder="Masukkan nama field">
                                    </div>
                                    <div class="mb-3">
                                        <h6 class="dropdown-label text-dark mb-2">Tipe field</h6>
                                        <select class="form-select" id="viewEditCustomFieldType">
                                            <option value="">Pilih tipe..</option>
                                            <option value="text">Teks</option>
                                            <option value="number">Angka</option>
                                            <option value="date">Tanggal</option>
                                        </select>
                                    </div>
                                    <div class="d-flex justify-content-end gap-2 mt-3">
                                        <button type="button" class="btn btn-secondary btn-sm"
                                            id="viewCancelEditCustomFieldBtn">Batal</button>
                                        <button type="button" class="btn btn-primary btn-sm"
                                            id="viewSaveEditCustomFieldBtn">
                                            <span class="btn-text">Simpan</span>
                                            <span class="btn-loading d-none text-white">
                                                <i class="fas fa-spinner fa-spin me-1"></i>Menyimpan..
                                            </span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mb-4">
                            <label class="fw-bold mb-2">Lampiran</label>
                            <div id="viewAttachmentsContainer"></div>
                        </div>
                        <div class="mb-4">
                            <label class="fw-bold mb-2">Anggota card</label>
                            <div id="viewCardMembersContainer"></div>
                        </div>
                    </div>

                    {{-- Right Column - Comments and Activities --}}
                    <div class="col-md-5" style="overflow-y: auto; max-height: 100%;">
                        <div class="bg-light h-100 p-4 d-flex flex-column view-card-comments-section">
                            {{-- Header Section --}}
                            <div class="comments-section-header mb-0">
                                <div class="d-flex justify-content-between align-items-center">
                                    <label class="fw-bold mb-0 comments-section-label">
                                        Komentar & Aktivitas
                                    </label>
                                    <div class="filter-dropdown">
                                        <button class="btn btn-outline-primary btn-sm dropdown-toggle mt-3"
                                            type="button" id="filterDropdown" data-bs-toggle="dropdown"
                                            aria-expanded="false">
                                            <i class="fas fa-filter me-1"></i>
                                            <span id="filterText">Semua</span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end view-card-dropdown-menu"
                                            aria-labelledby="filterDropdown">
                                            <li><a class="dropdown-item view-card-dropdown-item" href="#"
                                                    onclick="filterComments('all')">
                                                    <i class="fas fa-list me-2"></i>Semua
                                                </a></li>
                                            <li><a class="dropdown-item view-card-dropdown-item" href="#"
                                                    onclick="filterComments('comments')">
                                                    <i class="fas fa-comment me-2"></i>Komentar
                                                </a></li>
                                            <li><a class="dropdown-item view-card-dropdown-item" href="#"
                                                    onclick="filterComments('activities')">
                                                    <i class="fas fa-clock me-2"></i>Aktivitas
                                                </a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>



                            {{-- Comments and Activities Feed --}}
                            <div class="comments-feed-wrapper grow">
                                <div class="comments-feed">
                                    {{-- Dynamic content will be populated here by JavaScript --}}
                                    <div class="text-center text-muted py-4" id="commentsLoadingPlaceholder">
                                        <div class="spinner-border spinner-border-sm text-primary mb-2"
                                            role="status">
                                            <span class="visually-hidden">Memuat..</span>
                                        </div>
                                        <p class="mb-0 small">Memuat komentar..</p>
                                    </div>
                                </div>
                            </div>

                            {{-- Confirm Delete Comment Dropdown --}}
                            <div id="confirmDeleteCommentDropdown" class="dropdown-menu py-0"
                                style="width: 320px; display: none; position: fixed; z-index: 9999;">
                                <div class="dropdown-header text-center bg-danger">
                                    <h5 class="dropdown-title fw-bold mt-2 text-white">
                                        <i class="fas fa-exclamation-triangle me-2"></i>Hapus Komentar
                                    </h5>
                                </div>
                                <div class="dropdown-content pb-0 p-3">
                                    <p class="mb-2">Apakah Anda yakin ingin menghapus komentar ini? Tindakan ini
                                        tidak dapat dibatalkan.</p>
                                    <div class="d-flex justify-content-end gap-2">
                                        <button type="button" class="btn btn-secondary btn-sm"
                                            id="cancelDeleteCommentBtn">Batal</button>
                                        <button type="button" class="btn btn-danger btn-sm"
                                            id="confirmDeleteCommentBtn">
                                            <span class="btn-text">Hapus</span>
                                            <span class="btn-loading d-none text-white">
                                                <i class="fas fa-spinner fa-spin me-1"></i>Menghapus...
                                            </span>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            {{-- Confirm Delete Reply Dropdown --}}
                            <div id="confirmDeleteReplyDropdown" class="dropdown-menu py-0"
                                style="width: 320px; display: none; position: fixed; z-index: 9999;">
                                <div class="dropdown-header text-center bg-danger">
                                    <h5 class="dropdown-title fw-bold mt-2 text-white">
                                        <i class="fas fa-exclamation-triangle me-2"></i>Hapus Balasan
                                    </h5>
                                </div>
                                <div class="dropdown-content pb-0 p-3">
                                    <p class="mb-2">Apakah Anda yakin ingin menghapus balasan ini? Tindakan ini tidak
                                        dapat dibatalkan.</p>
                                    <div class="d-flex justify-content-end gap-2">
                                        <button type="button" class="btn btn-secondary btn-sm"
                                            id="cancelDeleteReplyBtn">Batal</button>
                                        <button type="button" class="btn btn-danger btn-sm"
                                            id="confirmDeleteReplyBtn">
                                            <span class="btn-text">Hapus</span>
                                            <span class="btn-loading d-none text-white">
                                                <i class="fas fa-spinner fa-spin me-1"></i>Menghapus..
                                            </span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Preview Modal --}}
    <div class="modal fade" id="previewModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen m-0">
            <div class="modal-content preview-modal-content bg-transparent border-0 shadow-none p-0">
                <button type="button" class="btn-close text-white position-absolute top-0 end-0 m-4"
                    data-bs-dismiss="modal" aria-label="Close" style="z-index:1052;"></button>
                <div class="modal-body d-flex flex-column align-items-center justify-content-center p-0"
                    style="height:100vh;">
                    <div class="file-container" id="fileContainer">
                        <img id="previewModalImg" src="" alt="Preview" class="preview-img" />
                        <iframe id="previewModalPdf" class="d-none preview-pdf"></iframe>
                        <pre id="previewModalText" class="d-none text-white bg-dark p-3 rounded preview-text"></pre>
                        <div id="previewModalGeneric" class="d-none text-white text-center">
                        </div>
                        <div id="previewModalDescription" class="text-white text-center fs-5"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Modal Content Customizations */
    .view-card-modal-content {
        border: none;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #viewCardModal .modal-body {
        flex: 1;
        overflow: hidden !important;
    }

    #cardModalContent {
        height: 100% !important;
    }

    #cardModalContent>.col-md-7,
    #cardModalContent>.col-md-5 {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: 100% !important;
    }

    /* Allow dropdowns to overflow outside scrollable areas */
    #viewCardModal .modal-dialog {
        overflow: visible !important;
    }

    /* Ensure dropdown menus appear above everything with fixed positioning */
    #viewCardModal .dropdown-menu {
        z-index: 10500 !important;
    }

    /* Ensure dropdown containers don't clip */
    #viewCardModal .dropdown {
        position: relative !important;
    }

    .view-card-form-input {
        border-radius: 6px !important;
    }

    .view-card-action-btn {
        border-radius: 6px !important;
    }

    .view-card-content-container {
        border-radius: 8px !important;
    }

    .view-card-dropdown-menu {
        border-radius: 8px !important;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        font-size: 0.875rem;
    }

    .view-card-dropdown-item {
        font-size: 0.875rem;
    }

    .view-card-priority {
        border-radius: 8px !important;
        padding: 6px 12px;
        display: inline-block;
        width: 100%;
        font-size: 11px;
        font-weight: bold;
    }

    .view-card-title-input {
        border: 1px solid transparent;
        background: transparent;
        font-size: 24px;
        font-weight: bold !important;
        outline: none;
        width: 100%;
        min-width: 0 !important;
        border-radius: 6px !important;
        box-sizing: border-box;
        resize: none;
        min-height: 40px;
        max-height: 400px;
        overflow-y: hidden !important;
        overflow-x: hidden !important;
        padding: 6px 2px;
        line-height: 1.2;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: pre-wrap;
    }

    .view-card-title-input:focus {
        border: 1px solid #1e8c94;
        background: #fff;
    }

    .view-card-section-title {
        border-radius: 8px !important;
        padding: 8px 12px;
        background: rgba(255, 255, 255, 0.1);
        display: inline-block;
        margin-bottom: 12px;
    }

    .view-card-comments-section {
        border-bottom-right-radius: 8px !important;
    }

    .view-card-comment-bubble {
        border-radius: 8px !important;
        display: inline-block;
    }

    .view-card-avatar {
        border-radius: 50% !important;
    }

    .user-avatar {
        border-radius: 50% !important;
    }

    #viewCardMembersContainer {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 8px;
    }

    .selected-member-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50% !important;
        object-fit: cover;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .selected-member-item {
        display: inline-block;
        cursor: default;
    }

    .selected-member-dropdown-item {
        display: flex;
        align-items: center;
        padding: 10px 12px;
        border-radius: 8px !important;
        margin-bottom: 8px;
        gap: 12px;
        background-color: white;
    }

    .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }

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

    .user-info h6 {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        color: #212529;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .user-info small {
        font-size: 12px;
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }

    .remove-member-btn {
        border-radius: 6px !important;
    }

    .user-item {
        border-radius: 6px !important;
    }

    .modal-loading {
        transition: all 0.3s ease-in-out;
        overflow: hidden;
    }

    .modal-loaded {
        transition: all 0.3s ease-in-out;
    }

    .loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 1);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1060;
        border-radius: 8px;
    }

    .loading-content {
        text-align: center;
        padding: 2rem;
    }

    .loading-content .spinner-border {
        width: 3rem;
        height: 3rem;
    }

    .loading-content p {
        margin-top: 1rem;
        font-size: 0.9rem;
        color: #6c757d;
    }

    /* Content transitions */
    #cardModalContent {
        transition: opacity 0.3s ease;
    }

    #cardModalContent .content-loading {
        opacity: 01;
        pointer-events: none;
    }

    /* Ensure modal content is positioned for overlay */
    #viewCardModalContent {
        position: relative;
    }

    #viewCardModal .dropdown-toggle {
        width: 112px;
    }

    #viewCardModal .dropdown-toggle::after {
        display: none !important;
    }

    .dropdown-header {
        border-bottom: 1px solid #dee2e6;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    .dropdown-header .dropdown-title {
        font-size: 16px;
    }

    .dropdown-label {
        font-size: 14px;
    }

    .dropdown-label small {
        font-weight: normal;
        color: #6c757d;
        font-size: 12px;
    }

    .attachment-action-btn {
        background: var(--gray-100);
        width: 40px !important;
        height: 32px !important;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .attachment-action-btn:hover {
        background-color: var(--gray-200);
    }

    .attachment-header {
        font-size: 14px;
    }

    .attachment-text {
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .attachment-text a {
        max-width: 350px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        vertical-align: middle;
    }

    .attachment-text small {
        max-width: 350px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        vertical-align: middle;
    }

    .attachment-link {
        color: #0065d1;
    }

    .attachment-link:hover {
        text-decoration: underline;
    }

    .attach-file-section {
        border-bottom: 1px solid #dee2e6;
        padding-bottom: 25px;
    }

    .attachment-img-thumb {
        width: 60px;
        height: auto;
        object-fit: cover;
        cursor: pointer;
        border-radius: 6px;
    }

    .attachment-file-thumb {
        width: 60px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--gray-100);
        border-radius: 6px;
        font-weight: bold;
        font-size: 18px;
        color: var(--gray-600);
        cursor: pointer;
    }

    #previewModalImg {
        max-width: auto;
        max-height: 70vh;
        border-radius: 8px;
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
    }

    .preview-modal-content {
        overflow-y: auto;
        background: rgba(0, 0, 0, 0.65) !important;
        height: 100vh;
        width: 100vw;
        border-radius: 0;
        box-shadow: none;
        position: relative;
    }

    /* File container that handles scrolling */
    .file-container {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: calc(100vh - 120px);
        padding: 20px;
        margin-bottom: 60px;
        overflow: auto;
        position: relative;
    }

    .preview-img {
        max-width: 90vw;
        max-height: 70vh;
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
        /* cursor: zoom-in; */
        display: block;
    }

    .preview-pdf {
        width: 80vw;
        height: 70vh;
        border: none;
    }

    .preview-text {
        max-width: 90vw;
        max-height: 70vh;
        overflow: auto;
    }

    .preview-modal-content .btn-close {
        font-size: 20px;
        z-index: 1200;
    }

    #previewModal {
        z-index: 1080 !important;
    }

    #previewModal .modal-dialog {
        z-index: 1081 !important;
    }

    #previewModalDescription {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        color: #fff;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
        padding: 24px 8px;
        z-index: 1200;
        text-align: center;
        font-size: 18px;
        pointer-events: none;
    }

    #previewModalDescription .small {
        display: block;
        color: #ccc;
        margin-top: 4px;
        font-size: 15px;
    }

    /* Enhanced Comments and Activities Section Styles */
    .view-card-comments-section {
        background: #f8f9fa;
        border-radius: 0 0 8px 0;
    }

    /* Comments Section Header */
    .comments-section-header {
        border-bottom: 1px solid #e9ecef;
        padding-bottom: 12px;
    }

    .comments-section-label {
        font-size: 16px;
        color: #495057;
        display: flex;
        align-items: center;
    }

    /* Filter Dropdown */
    .filter-dropdown .dropdown-toggle {
        font-size: 0.875rem;
        padding: 6px 12px;
        border-radius: 6px;
        font-weight: 500;
        min-width: auto;
    }

    .filter-dropdown .dropdown-toggle::after {
        margin-left: 6px;
    }



    /* Comments Feed Wrapper */
    .comments-feed-wrapper {
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* Comments Feed Styling */
    .comments-feed {
        overflow-y: auto;
        padding-right: 4px;
    }

    /* Activity Item Styling - Consistent with other cards */
    .activity-item {
        padding: 12px 14px;
        margin-bottom: 12px;
        background: white;
        border: 1px solid #e9ecef;
        border-left: 3px solid #28a745;
        border-radius: 6px;
        transition: all 0.2s ease;
    }

    .activity-item:hover {
        border-left-color: #218838;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transform: translateX(2px);
    }

    .activity-icon {
        background: #28a745;
        color: white;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem;
        flex-shrink: 0;
    }

    .activity-description {
        color: #495057;
        font-size: 0.875rem;
        line-height: 1.5;
    }

    .activity-description strong {
        color: #212529;
        font-weight: 600;
    }

    .activity-time {
        font-size: 0.75rem;
        color: #6c757d;
    }

    /* Comment Item Styling - Consistent with Activities */
    .comment-item {
        padding: 12px 14px;
        margin-bottom: 12px;
        background: white;
        border-radius: 6px;
        border: 1px solid #e9ecef;
        border-left: 3px solid #007bff;
        transition: all 0.2s ease;
    }

    .comment-item:hover {
        border-left-color: #0056b3;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transform: translateX(2px);
    }

    .comment-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
    }

    .comment-author {
        font-weight: 600;
        color: #212529;
        font-size: 0.875rem;
    }

    .comment-time {
        font-size: 0.75rem;
        color: #6c757d;
    }

    .view-card-comment-bubble {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        margin-top: 0;
        font-size: 0.875rem;
        line-height: 1.5;
        color: #495057;
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: break-word;
        white-space: pre-wrap;
        max-width: 100%;
    }

    /* Avatar Styling - Consistent with Activities */
    .view-card-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        flex-shrink: 0;
    }

    .task-member-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 2px solid #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        background: #007bff;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.875rem;
        flex-shrink: 0;
    }

    /* Empty State Styling */
    .comments-feed .text-center {
        padding: 32px 20px;
        color: #adb5bd;
    }

    .comments-feed .text-center .spinner-border {
        margin-bottom: 8px;
    }

    /* New Comment Highlight */
    .comment-item.new-comment {
        background: #e7f5ff;
        border-left-color: #007bff;
        animation: highlightFade 2s ease-out;
    }

    @keyframes highlightFade {
        0% {
            background: #cce5ff;
        }

        100% {
            background: white;
        }
    }



    /* Animations */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .comment-item,
    .activity-item {
        animation: fadeInUp 0.3s ease-out;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .view-card-comments-section {
            padding: 16px;
        }

        .comments-feed {
            max-height: 45vh;
        }

        .comment-textarea {
            font-size: 0.8125rem;
            padding: 8px 12px;
        }

        .btn-send-comment {
            width: 38px;
            height: 38px;
        }

        .view-card-avatar,
        .task-member-icon {
            width: 32px;
            height: 32px;
            font-size: 0.8125rem;
        }

        .comment-author {
            font-size: 0.8125rem;
        }

        .comment-time,
        .activity-time {
            font-size: 0.6875rem;
        }

        .view-card-comment-bubble {
            font-size: 0.8125rem;
            padding: 8px 10px;
        }

        .activity-description {
            font-size: 0.8125rem;
        }

        .filter-dropdown .dropdown-toggle {
            font-size: 0.8125rem;
            padding: 5px 10px;
        }

        .comments-section-label {
            font-size: 0.875rem;
        }
    }



    .comment-bubble {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
        position: relative;
        margin-top: 0;
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    .comment-bubble::before {
        display: none;
    }

    .comment-author-info {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        gap: 10px;
    }

    .comment-author-name {
        font-weight: 600;
        color: #212529;
        font-size: 0.875rem;
        margin: 0;
    }

    .comment-timestamp {
        color: #6c757d;
        font-size: 0.75rem;
        background: transparent;
        padding: 0;
        border-radius: 0;
        font-weight: 400;
    }

    .comment-content {
        color: #495057;
        font-size: 0.875rem;
        line-height: 1.5;
        margin: 0;
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: break-word;
        white-space: pre-wrap;
        max-width: 100%;
    }

    /* Profile Image - Consistent with Activity Icons */
    .comment-avatar {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50%;
        border: 2px solid #ffffff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        object-fit: cover;
        transition: none;
    }

    .comment-avatar:hover {
        transform: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .comment-avatar-placeholder {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50%;
        background: #007bff;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem;
        font-weight: 600;
        border: 2px solid #ffffff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: none;
    }

    .comment-avatar-placeholder:hover {
        transform: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        background: #007bff;
    }

    /* Comment Actions (Reply, Reactions) */
    .comment-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
        padding: 0;
    }

    .comment-action-btn {
        background: none;
        border: none;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.75rem;
        color: #6c757d;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .comment-action-btn:hover {
        background: #f8f9fa;
        color: #007bff;
    }

    .comment-action-btn.active {
        background: #e7f1ff;
        color: #007bff;
        font-weight: 600;
    }

    /* Reactions */
    .comment-reactions {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-top: 6px;
        flex-wrap: wrap;
        margin-bottom: 4px;
    }

    .reaction-item {
        background: #f0f2f5;
        border: 1px solid #e4e6ea;
        border-radius: 12px;
        padding: 2px 6px;
        font-size: 0.75rem;
        display: flex;
        align-items: center;
        gap: 3px;
        cursor: pointer;
        transition: all 0.2s ease;
        user-select: none;
        min-height: 18px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .reaction-item:hover {
        background: #e4e6ea;
        border-color: #d0d7de;
        transform: scale(1.05);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    }

    .reaction-item.user-reacted {
        background: #e3f2fd;
        border-color: #2196f3;
        color: #1976d2;
        font-weight: 600;
    }

    .reaction-item.user-reacted:hover {
        background: #bbdefb;
        border-color: #1976d2;
    }

    .reaction-emoji {
        font-size: 0.85rem;
        line-height: 1;
    }

    .reaction-count {
        font-size: 0.7rem;
        color: #65676b;
        font-weight: 500;
        min-width: 8px;
        text-align: center;
    }

    .reaction-item.user-reacted .reaction-count {
        color: #1976d2;
    }

    /* Emoji Picker */
    .emoji-picker {
        position: absolute;
        top: 100%;
        left: 0;
        background: white;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        padding: 12px;
        z-index: 1060;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 8px;
        min-width: 200px;
    }

    .emoji-option {
        background: none;
        border: none;
        font-size: 1.2rem;
        padding: 8px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .emoji-option:hover {
        background: rgba(32, 201, 151, 0.1);
        transform: scale(1.1);
    }

    /* Reply Thread */
    .reply-thread {
        margin-left: 8px;
        margin-top: 12px;
        border-left: 2px solid #17a2b8;
        padding-left: 12px;
        background: rgba(23, 162, 184, 0.03);
        border-radius: 0 4px 4px 0;
    }

    .reply-thread-header {
        margin-bottom: 8px;
    }

    .reply-thread-header .badge {
        background: #17a2b8;
        font-size: 0.7rem;
        padding: 4px 8px;
        border-radius: 4px;
    }

    .reply-item {
        padding: 8px 10px;
        margin-bottom: 8px;
        background: white;
        border-radius: 4px;
        border-left: 2px solid #17a2b8;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        transition: all 0.2s ease;
    }

    .reply-item:hover {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
        transform: translateX(2px);
    }

    .reply-item:last-child {
        margin-bottom: 0;
    }

    .reply-icon {
        color: #17a2b8;
        margin-right: 6px;
        margin-top: 2px;
        font-size: 0.7rem;
        flex-shrink: 0;
    }

    .reply-avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #17a2b8;
        flex-shrink: 0;
    }

    .reply-avatar.nested {
        width: 22px;
        height: 22px;
        border: 1.5px solid #6c757d;
    }

    .reply-bubble {
        flex: 1;
    }

    .reply-author {
        font-size: 0.8rem;
        color: #212529;
        margin: 0;
        font-weight: 600;
    }

    .reply-time {
        font-size: 0.7rem;
        color: #6c757d;
    }

    .reply-content {
        margin: 4px 0;
        font-size: 0.8rem;
        color: #495057;
        line-height: 1.4;
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: break-word;
        white-space: pre-wrap;
        max-width: 100%;
    }

    .reply-actions {
        margin-top: 4px;
    }

    .reply-to-reply-btn {
        font-size: 0.7rem;
        color: #17a2b8;
        text-decoration: none;
        padding: 0;
        background: none;
        border: none;
    }

    .reply-to-reply-btn:hover {
        color: #138496;
        text-decoration: underline;
    }

    /* Nested replies styling */
    .nested-replies {
        border-left: 1.5px dashed #17a2b8;
        margin-top: 8px;
        padding-left: 8px;
        margin-left: 8px;
    }

    .nested-replies-header {
        margin-bottom: 6px;
    }

    .nested-replies-header .badge {
        font-size: 0.65rem;
        padding: 2px 6px;
    }

    .reply-item.nested {
        background: #f8f9fa;
        border-left: 1.5px solid #6c757d;
        padding: 6px 8px;
        margin-bottom: 6px;
    }

    .reply-item.nested:hover {
        background: #e9ecef;
    }

    .nested-reply-icon {
        color: #6c757d;
        margin-right: 4px;
        margin-top: 2px;
        font-size: 0.65rem;
        flex-shrink: 0;
    }

    .reply-bubble.nested {
        font-size: 0.75rem;
    }

    .reply-bubble.nested .reply-author {
        font-size: 0.75rem;
    }

    .reply-bubble.nested .reply-time {
        font-size: 0.65rem;
    }

    .reply-bubble.nested .reply-content {
        font-size: 0.75rem;
        margin: 3px 0;
    }

    .reply-bubble.nested .reply-to-reply-btn {
        font-size: 0.65rem;
    }

    /* Modern Simplified Reply Preview */
    .reply-preview {
        background: white;
        border: 1px solid #e9ecef;
        border-left: 3px solid #17a2b8;
        border-radius: 6px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        transition: all 0.2s ease;
        overflow: hidden;
    }

    .reply-preview:hover {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    }

    .reply-preview-content {
        padding: 0;
    }

    .reply-preview-header {
        display: flex;
        align-items: center;
        font-size: 0.75rem;
        color: #6c757d;
        background: rgba(23, 162, 184, 0.08);
        padding: 8px 12px;
        margin-bottom: 0;
    }

    .reply-preview-header i {
        color: #17a2b8;
        font-size: 0.75rem;
        margin-right: 6px;
    }

    .reply-preview-text {
        font-size: 0.8125rem;
        color: #495057;
        background: white;
        padding: 8px 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1.4;
    }

    padding: 12px 16px;
    border-radius: 0;
    border-left: 4px solid #17a2b8;
    margin-top: 0;
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
    }

    /* Reply actions */
    .reply-actions {
        display: flex;
        gap: 8px;
    }

    .reply-to-reply-btn {
        background: none;
        border: none;
        color: #6c757d;
        font-size: 0.75rem;
        padding: 2px 6px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .reply-to-reply-btn:hover {
        background: #e9ecef;
        color: #495057;
    }

    .reply-form {
        margin-top: 12px;
        padding: 12px;
        background: rgba(248, 249, 250, 0.8);
        border-radius: 12px;
        border: 1px solid #e9ecef;
    }

    .reply-form.nested {
        margin-top: 8px;
        padding: 8px;
        background: rgba(233, 236, 239, 0.5);
        border-radius: 8px;
    }

    /* Global reply form styling */
    .reply-form.global-reply-form {
        position: sticky;
        bottom: 0;
        background: white;
        border: 2px solid #20c997;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
        z-index: 10;
    }

    /* Reply target indicator */
    .reply-target-indicator {
        background: #e3f2fd;
        border: 1px solid #2196f3;
        border-radius: 8px;
        margin-bottom: 8px;
        animation: fadeIn 0.3s ease;
    }

    .reply-target-info {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        font-size: 0.9rem;
        color: #1976d2;
    }

    .reply-target-info i {
        color: #2196f3;
    }

    .reply-target-close {
        background: none;
        border: none;
        color: #757575;
        cursor: pointer;
        margin-left: auto;
        padding: 4px;
        border-radius: 50%;
        transition: all 0.2s;
    }

    .reply-target-close:hover {
        background: #e0e0e0;
        color: #424242;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .reply-input {
        width: 100%;
        border: none;
        background: white;
        border-radius: 20px;
        padding: 8px 16px;
        font-size: 0.9rem;
        outline: none;
        resize: none;
        min-height: 36px;
        border: 1px solid #e9ecef;
        transition: all 0.3s ease;
    }

    .reply-input:focus {
        border-color: #20c997;
        box-shadow: 0 0 0 3px rgba(32, 201, 151, 0.1);
    }

    .reply-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 8px;
    }

    .reply-btn {
        padding: 6px 12px;
        border: none;
        border-radius: 16px;
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .reply-btn-cancel {
        background: #f8f9fa;
        color: #6c757d;
    }

    .reply-btn-cancel:hover {
        background: #e9ecef;
    }

    .reply-btn-submit {
        display: none;
        /* Hide REPLY button completely */
    }

    .reply-btn-submit:hover {
        background: #17a085;
        transform: translateY(-1px);
    }

    .reply-btn-submit:disabled {
        background: #ced4da;
        cursor: not-allowed;
        transform: none;
    }

    /* Toggle Reply Form Animation */
    .reply-form {
        animation: slideDown 0.3s ease-out;
        transform-origin: top;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: scaleY(0);
        }

        to {
            opacity: 1;
            transform: scaleY(1);
        }
    }

    /* Hide/Show animations */
    .hidden {
        display: none !important;
    }

    .fade-in {
        animation: fadeIn 0.3s ease-out;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Mention styling */
    .mention {
        background-color: #e3f2fd;
        color: #1976d2;
        padding: 2px 4px;
        border-radius: 3px;
        font-weight: 500;
        text-decoration: none;
    }

    .mention:hover {
        background-color: #bbdefb;
        cursor: pointer;
    }

    /* Mention dropdown styling - Removed duplicate, see line ~1053 for main definition */

    .mention-item {
        cursor: pointer;
        border-bottom: 1px solid #f1f3f4;
        transition: background-color 0.2s ease;
        position: relative;
        z-index: 1061;
    }

    .mention-item:last-child {
        border-bottom: none;
        border-radius: 0 0 8px 8px;
    }

    .mention-item:hover,
    .mention-item.selected {
        background-color: #f8f9fa;
    }

    .mention-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
    }

    .mention-name {
        font-weight: 500;
        font-size: 14px;
        color: #1a1a1a;
        margin-bottom: 2px;
    }

    .mention-username {
        font-size: 12px;
        color: #65676b;
    }

    .mention-info {
        min-width: 0;
    }

    /* Ensure modal doesn't clip dropdown */
    .modal-body {
        overflow: visible !important;
    }

    .modal-dialog {
        overflow: visible !important;
    }

    .mention-username {
        font-size: 12px;
        color: #65676b;
    }

    /* Comment content styling */
    .comment-content {
        line-height: 1.5;
    }

    .comment-content .mention {
        display: inline;
    }

    /* Comment link styling */
    .comment-link {
        color: #0d6efd;
        text-decoration: underline;
        word-break: break-all;
    }

    .comment-link:hover {
        color: #0a58ca;
        text-decoration: underline;
    }

    .comment-link:visited {
        color: #6610f2;
    }

    .custom-field-item {
        padding: 12px;
        border-radius: 6px;
        margin-bottom: 10px;
    }

    .custom-field-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
    }

    .custom-field-value {
        width: 100%;
    }

    .custom-field-header {
        font-size: 14px;
    }

    .custom-field-action-btn {
        background: var(--gray-100);
        width: 40px !important;
        height: 32px !important;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 35px;
    }

    .custom-field-action-btn:hover {
        background: var(--gray-200);
    }

    /* Original message preview in replied messages - Simplified */
    .original-message-preview {
        background: #f8f9fa;
        border: none;
        border-left: 3px solid #1976d2;
        padding: 8px 12px;
        margin: 0 0 8px 0;
        border-radius: 4px;
        font-size: 0.8125rem;
        position: relative;
        box-shadow: none;
        transition: none;
    }

    .original-message-preview:hover {
        box-shadow: none;
        transform: none;
    }

    .original-message-header {
        display: flex;
        align-items: center;
        margin-bottom: 4px;
        padding-bottom: 0;
        border-bottom: none;
    }

    .original-message-header i {
        font-size: 0.75rem;
        background: transparent;
        padding: 0;
        border-radius: 0;
        width: auto;
        height: auto;
        display: inline;
        align-items: center;
        justify-content: center;
        margin-right: 4px;
    }

    .original-message-author {
        color: #6c757d;
        font-weight: 400;
        font-size: 0.75rem;
        letter-spacing: 0;
    }

    .original-message-text {
        color: #212529;
        font-size: 0.8125rem;
        line-height: 1.4;
        word-wrap: break-word;
        font-style: italic;
        background: transparent;
        padding: 0;
        border-radius: 0;
        margin-top: 0;
        border: none;
        position: relative;
    }

    .original-message-text::before {
        display: none;
    }

    .original-message-text::after {
        display: none;
    }

    /* Global reply preview container */
    .reply-preview-container {
        margin-bottom: 10px;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .reply-preview-container .reply-preview {
        background-color: #e3f2fd;
        border-left: 4px solid #2196f3;
        margin: 0;
        border-radius: 0;
    }

    .reply-preview-container .reply-preview-header {
        background-color: #2196f3;
        color: white;
        padding: 6px 10px;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .reply-preview-container .reply-preview-author {
        font-weight: 600;
        margin-left: 5px;
    }

    .reply-preview-container .reply-preview-close {
        background: none;
        border: none;
        color: white;
        cursor: pointer;
        padding: 2px 4px;
        border-radius: 3px;
        font-size: 12px;
    }

    .reply-preview-container .reply-preview-close:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }

    .reply-preview-container .reply-preview-content {
        padding: 8px 10px;
        font-size: 13px;
        color: #444;
        line-height: 1.3;
        word-wrap: break-word;
    }

    /* WhatsApp-style reply preview for comment input */
    #reply-preview {
        background: white;
        border: 1px solid rgba(23, 162, 184, 0.2);
        border-radius: 12px;
        padding: 0;
        margin-bottom: 12px;
        box-shadow: 0 2px 8px rgba(23, 162, 184, 0.15);
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #reply-preview:hover {
        box-shadow: 0 4px 12px rgba(23, 162, 184, 0.2);
        transform: translateY(-2px);
    }

    #reply-preview .reply-preview-content {
        padding: 0;
    }

    #reply-preview .reply-preview-header {
        background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
        padding: 12px 16px;
        border: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.875rem;
        color: white;
        font-weight: 600;
        letter-spacing: 0.3px;
    }

    #reply-preview .reply-preview-header i {
        color: white;
        margin-right: 8px;
        font-size: 0.9rem;
    }

    #reply-preview .reply-preview-header span {
        flex-grow: 1;
        display: flex;
        align-items: center;
        color: white;
    }

    #reply-preview .reply-preview-text {
        padding: 12px 16px;
        font-size: 0.813rem;
        color: #2d3748;
        line-height: 1.5;
        background: rgba(23, 162, 184, 0.08);
        font-style: normal;
        border-left: 4px solid #17a2b8;
        word-break: break-word;
    }

    .btn-close-reply {
        background: transparent;
        border: none;
        color: white;
        cursor: pointer;
        padding: 4px;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-close-reply i {
        font-size: 11px;
        font-weight: bold;
    }

    /* Reminder System Styles */
    .reminder-dropdown .dropdown-menu {
        max-height: none !important;
    }

    .reminder-option {
        transition: all 0.2s ease;
        border: 1px solid #dee2e6;
        margin-bottom: 6px;
    }

    .reminder-option:last-child {
        margin-bottom: 0;
    }

    .reminder-option.active,
    .reminder-option.btn-primary {
        color: white !important;
    }

    .reminder-option i {
        width: 20px;
        text-align: center;
    }

    #customReminderDateTime {
        font-size: 0.875rem;
    }

    #activeReminderDisplay .btn-link {
        text-decoration: none;
        opacity: 0.7;
        transition: opacity 0.2s;
    }

    #activeReminderDisplay .btn-link:hover {
        opacity: 1;
    }

    #reminderButtonText {
        font-weight: 500;
    }

    #reminderDropdown:disabled {
        opacity: 0.5;
        cursor: not-allowed !important;
        background-color: #e9ecef !important;
        border-color: #dee2e6 !important;
        color: #6c757d !important;
    }

    #reminderDropdown:disabled:hover {
        background-color: #e9ecef !important;
        border-color: #dee2e6 !important;
    }
</style>

<script>
    // Bootstrap dropdowns will be automatically initialized by Bootstrap's data-api on click.

    function initializeViewCardDescription() {
        const editorTextarea = document.getElementById('cardDescriptionEditor');
        let summernoteInitialized = false;

        function initSummernote() {
            if (summernoteInitialized) return;
            $(editorTextarea).summernote({
                height: 160,
                toolbar: [
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol']],
                    ['insert', ['link']],
                    ['view', ['fullscreen', 'codeview']]
                ],
                callbacks: {
                    onBlur: function() {
                        // No save on archived cards - they are read-only
                    },
                    onPaste: function(e) {
                        // Auto-linkify URLs when pasting
                        const clipboardData = e.originalEvent.clipboardData || window.clipboardData;
                        const pastedText = clipboardData.getData('text/plain');
                        if (pastedText) {
                            e.preventDefault();
                            const linkedText = linkifyText(pastedText);
                            document.execCommand('insertHTML', false, linkedText);
                        }
                    }
                }
            });
            summernoteInitialized = true;
        }

        // Set content and enable/disable editor based on permissions
        window.setViewCardDescription = function(description, canEdit) {
            initSummernote();
            $(editorTextarea).summernote('code', description || '');
            if (canEdit) {
                $(editorTextarea).summernote('enable');
            } else {
                $(editorTextarea).summernote('disable');
            }
        };
    }

    // Initialize custom fields functionality for read-only viewing
    function initializeViewCardCustomFields() {
        // Global array to store custom fields
        window.viewCardCustomFields = [];

        // Render custom fields in read-only mode
        function renderViewCardCustomFields() {
            const fieldsContainer = document.getElementById('viewCustomFieldsContainer');

            const canEdit = window.currentCardCanEdit || false;

            let html = window.viewCardCustomFields.map((field, idx) => {
                const typeLabels = {
                    text: 'Text',
                    number: 'Number',
                    date: 'Date'
                };

                return `
          <div class="custom-field-item d-flex align-items-start mb-3">
            <div class="flex-grow-1">
              <div class="d-flex align-items-center mb-2">
                <h6 class="custom-field-header fw-bold me-2 mb-0">${escapeHtml(field.name)}</h6>
                <small class="text-muted">(${typeLabels[field.type] || field.type})</small>
              </div>
              <div class="custom-field-value">
                ${renderFieldInput(field, idx, canEdit)}
              </div>
            </div>
          </div>
        `;
            }).join('');

            fieldsContainer.innerHTML = html;
        }

        // Render field input (read-only for archived cards)
        function renderFieldInput(field, idx, canEdit) {
            const value = field.value || '';
            const readonlyAttr = canEdit ? '' : 'readonly disabled';

            switch (field.type) {
                case 'text':
                    return `<input type="text" class="form-control custom-field-input form-control-sm" 
                       data-idx="${idx}" 
                       value="${escapeHtml(value)}" 
                       placeholder="${canEdit ? 'Enter ' + field.name.toLowerCase() + '..' : 'No value'}"
                       ${readonlyAttr}>`;

                case 'number':
                    return `<input type="number" class="form-control custom-field-input form-control-sm" 
                       data-idx="${idx}" 
                       value="${value}" 
                       placeholder="${canEdit ? 'Enter ' + field.name.toLowerCase() + '..' : 'No value'}"
                       ${readonlyAttr}>`;

                case 'date':
                    return `<input type="date" class="form-control custom-field-input form-control-sm" 
                       data-idx="${idx}" 
                       value="${value}"
                       ${readonlyAttr}>`;

                default:
                    return '<span class="text-muted">Unknown field type</span>';
            }
        }

        // Helper function to escape HTML
        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

        // Make render function globally accessible
        window.renderViewCardCustomFields = renderViewCardCustomFields;
    }

    // Initialize attachments functionality for read-only viewing
    function initializeViewCardAttachments() {
        // Global array to store attachments
        window.viewCardAttachments = [];

        // Render attachments in read-only mode (no edit/delete buttons)
        function renderViewCardAttachments() {
            const attachmentsContainer = document.getElementById('viewAttachmentsContainer');

            // Split attachments into files and links
            const fileAttachments = window.viewCardAttachments.filter(att =>
                (att.file) ||
                (att.type && att.type !== 'link' && att.path)
            );
            const linkAttachments = window.viewCardAttachments.filter(att =>
                (att.link) ||
                (att.type === 'link' && att.path)
            );

            let html = '';

            if (fileAttachments.length) {
                html += `<div class="mx-1 mt-2"><h6 class="attachment-header">Files</h6></div>`;
                html += fileAttachments.map((att, idx) => {
                    const mainIdx = window.viewCardAttachments.indexOf(att);
                    let previewHtml = '';
                    let fileName = att.displayText || att.name || (att.file ? att.file.name : '');
                    let createdAt = att.createdAt ? new Date(att.createdAt) : new Date();
                    let dateStr = createdAt.toLocaleDateString(undefined, {
                        year: 'numeric',
                        month: 'short',
                        day: 'numeric'
                    });

                    // Server-side image - clickable for preview
                    if (att.type && att.type.startsWith('image/') && att.path) {
                        previewHtml = `
              <img src="${att.path}" alt="preview" class="attachment-img-thumb me-2"
                data-img-url="${att.path}"
                data-filename="${fileName}"
                data-created-at="${dateStr}"
                data-idx="${mainIdx}"
                style="cursor: pointer;" />
            `;
                    }
                    // Server-side non-image file
                    else if (att.path) {
                        const ext = att.name ? att.name.split('.').pop().toUpperCase() : '';
                        previewHtml = `
              <div class="attachment-file-thumb me-2">
                ${ext}
              </div>
            `;
                    }

                    return `
            <div class="attachment-text d-flex align-items-center mb-2">
              <span class="me-2">${previewHtml}</span>
              <small>${fileName}</small>
            </div>
          `;
                }).join('');
            }

            if (linkAttachments.length) {
                html += `<div class="mb-2 mt-3"><h6 class="attachment-header">Links</h6></div>`;
                html += linkAttachments.map((att, idx) => {
                    const mainIdx = window.viewCardAttachments.indexOf(att);
                    const linkUrl = att.path;
                    const displayText = att.displayText && att.displayText.trim() !== '' ? att.displayText : (
                        att.name || linkUrl);

                    return `
            <div class="attachment-text d-flex align-items-center mb-2">
              <span class="me-2"><i class="fas fa-link"></i></span>
              <a class="attachment-link" href="${linkUrl}" target="_blank" rel="noopener noreferrer">${displayText}</a>
            </div>
          `;
                }).join('');
            }

            attachmentsContainer.innerHTML = html;

            // Add click event listeners for image preview
            attachmentsContainer.querySelectorAll('.attachment-img-thumb').forEach(img => {
                img.addEventListener('click', function() {
                    const imgUrl = this.getAttribute('data-img-url');
                    const fileName = this.getAttribute('data-filename');
                    const createdAt = this.getAttribute('data-created-at');

                    // Show preview modal
                    const previewModal = new bootstrap.Modal(document.getElementById('previewModal'));
                    const previewImg = document.getElementById('previewModalImg');
                    const previewDesc = document.getElementById('previewModalDescription');

                    previewImg.src = imgUrl;
                    previewDesc.innerHTML = `
            <strong>${fileName}</strong>
            <span class="small">Added on ${createdAt}</span>
          `;

                    previewModal.show();
                });
            });
        }

        // Make render function globally accessible
        window.renderViewCardAttachments = renderViewCardAttachments;
    }

    // Initialize members functionality for read-only viewing
    function initializeViewCardMembers() {
        // Global array to store selected members
        window.viewCardSelectedMembers = [];

        // Render selected members in read-only mode (no remove buttons)
        function renderViewCardSelectedMembers() {
            const container = document.getElementById('viewCardMembersContainer');
            const boardMembersContainer = document.getElementById('viewCardBoardMembers');

            // Update selected members display (avatars only, no remove functionality)
            const selectedItems = window.viewCardSelectedMembers.map(member => `
        <div class="selected-member-item" data-user-id="${member.id}" title="${member.name}">
          <img src="${member.image}" alt="${member.name}" class="selected-member-avatar">
        </div>
      `).join('');

            container.innerHTML = selectedItems;

            // Update board members section in dropdown (if exists)
            if (boardMembersContainer) {
                const boardMemberItems = window.viewCardSelectedMembers.map(member => {
                    return `
            <div class="selected-member-dropdown-item" data-user-id="${member.id}">
              <img src="${member.image}" alt="${member.name}" class="user-avatar">
              <div class="user-info flex-grow-1">
                <h6>${member.name}</h6>
                <small class="text-muted">${member.email}</small>
              </div>
            </div>
          `;
                }).join('');

                boardMembersContainer.innerHTML = boardMemberItems;
            }
        }

        // Dummy function for compatibility (no actual updates in read-only mode)
        function updateViewCardMemberHiddenInput() {
            // No-op for archived cards
        }

        // Make functions globally accessible
        window.renderViewCardSelectedMembers = renderViewCardSelectedMembers;
        window.updateViewCardMemberHiddenInput = updateViewCardMemberHiddenInput;
    }

    function openViewCardModal(taskId = null) {
        const modal = new bootstrap.Modal(document.getElementById('viewCardModal'));
        const modalElement = document.getElementById('viewCardModal');

        // Store current card ID globally
        currentCardId = taskId;
        window.currentCardId = taskId;

        // Reset reply state when opening modal
        if (typeof hideGlobalReplyPreview === 'function') {
            hideGlobalReplyPreview();
        }

        // Clear comment input
        const commentInput = document.getElementById('comment-input');
        if (commentInput) {
            commentInput.value = '';
            commentInput.placeholder = 'Write a comment...';
        }

        // Reset reminder to default state before loading card data
        if (typeof clearReminder === 'function') {
            clearReminder();
        }

        if (taskId) {
            // Show the modal first
            modalElement.setAttribute('data-card-id', taskId);
            // Add flag to track if data loaded successfully
            modalElement.setAttribute('data-load-success', 'false');
            modal.show();

            // Set the filter text to the global saved state
            if (typeof restoreFilterState === 'function') {
                // Use a small delay to ensure modal is fully shown
                setTimeout(() => restoreFilterState(), 100);
            }

            // Show loading state and hide content
            document.getElementById('cardModalLoading').classList.remove('d-none');
            document.getElementById('cardModalContent').classList.add('loading');

            // Reset form fields to empty state to prevent showing old data
            document.getElementById('cardUser').textContent = '';
            document.getElementById('cardTitle').textContent = '';
            document.getElementById('cardCreatedAt').value = '';
            document.getElementById('cardDueDate').value = '';

            // Construct URL for archived card API endpoint using Laravel's url helper
            const url = new URL('{{ url('archives/card') }}');
            url.searchParams.set('card_id', taskId);

            fetch(url.toString(), {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Content-Type': 'application/json',
                    }
                })
                .then(response => response.ok ? response.json() : Promise.reject(
                    `HTTP error! status: ${response.status}`))
                .then(data => {
                    if (data.success) {
                        const card = data.card;
                        if (typeof window.setViewCardDescription === 'function') {
                            window.setViewCardDescription(card.description, card.can_edit);
                        }

                        // Store card data globally
                        currentCardData = card;
                        window.currentCardData = card;
                        window.currentCardCanEdit = card.can_edit;

                        // Show/hide edit controls based on permissions
                        const addMemberBtn = document.getElementById('viewCardMembersDropdownBtn');
                        if (addMemberBtn) {
                            addMemberBtn.style.display = card.can_edit ? 'inline-block' : 'none';
                        }

                        const addAttachmentBtn = document.getElementById('viewCardAttachmentsDropdownBtn');
                        if (addAttachmentBtn) {
                            addAttachmentBtn.style.display = card.can_edit ? 'inline-block' : 'none';
                        }

                        const titleInput = document.getElementById('cardTitle');
                        if (titleInput) {
                            titleInput.readOnly = !card.can_edit;
                            if (!card.can_edit) {
                                titleInput.style.cursor = 'default';
                            } else {
                                titleInput.style.cursor = 'text';
                            }
                        }

                        const dueDateInput = document.getElementById('cardDueDate');
                        if (dueDateInput) {
                            dueDateInput.readOnly = !card.can_edit;
                            if (!card.can_edit) {
                                dueDateInput.style.cursor = 'default';
                                dueDateInput.style.backgroundColor = '#f8f9fa';
                            } else {
                                dueDateInput.style.cursor = 'text';
                                dueDateInput.style.backgroundColor = '';
                            }
                        }

                        const reminderDropdown = document.getElementById('reminderDropdown');
                        if (reminderDropdown) {
                            // Only card creator or board admin can set reminders
                            const canSetReminder = card.is_creator || card.is_admin;
                            if (!canSetReminder) {
                                reminderDropdown.disabled = true;
                                reminderDropdown.style.cursor = 'not-allowed';
                                reminderDropdown.title = 'Only the card creator or board admin can set reminders';
                            } else {
                                reminderDropdown.disabled = false;
                                reminderDropdown.style.cursor = 'pointer';
                                reminderDropdown.title = '';
                            }
                        }

                        // Populate modal with card data
                        document.getElementById('cardUser').textContent = card.user_create;
                        document.getElementById('cardTitle').textContent = card.title;
                        document.getElementById('cardTitle').setAttribute('data-original-title', card.title);
                        document.getElementById('cardTitle').setAttribute('data-card-id', taskId);
                        document.getElementById('cardCreatedAt').value = card.created_at;
                        document.getElementById('cardDueDate').value = card.due_date || '';

                        // Update priority badge
                        const priorityElement = document.getElementById('cardPriority');
                        priorityElement.textContent = card.priority_text;

                        // Set priority colors based on priority_color from backend
                        if (card.priority_color === 'black') {
                            priorityElement.style.background = '#262626';
                            priorityElement.style.color = '#ffffff';
                        } else if (card.priority_color === 'red') {
                            priorityElement.style.background = '#FF4D4F';
                            priorityElement.style.color = '#ffffff';
                        } else {
                            priorityElement.style.background = '#1890FF';
                            priorityElement.style.color = '#ffffff';
                        }

                        // Update modal title
                        document.getElementById('viewCardModalLabel').textContent = card.list_title;

                        if (typeof window.setCardCreatorUserId === 'function') {
                            window.setCardCreatorUserId(card.user_create_id);
                        }

                        // Load existing card members
                        if (typeof window.viewCardSelectedMembers !== 'undefined') {
                            window.viewCardSelectedMembers.length = 0;

                            if (card.members && Array.isArray(card.members)) {
                                card.members.forEach(member => {
                                    window.viewCardSelectedMembers.push({
                                        id: member.id,
                                        name: member.name,
                                        email: member.email,
                                        image: member.image
                                    });
                                });
                            }

                            if (typeof window.renderViewCardSelectedMembers === 'function') {
                                window.renderViewCardSelectedMembers();
                            }
                            if (typeof window.updateViewCardMemberHiddenInput === 'function') {
                                window.updateViewCardMemberHiddenInput();
                            }
                        }

                        // Set attachments from backend - map database fields to expected format
                        const attachmentsFromBackend = Array.isArray(card.attachments) ? card.attachments.map(
                        att => {
                            // Map database fields (filename, file_path) to code fields (name, path)
                            return {
                                id: att.id,
                                name: att.filename || att.name,
                                path: att.file_path || att.path,
                                type: att.type,
                                displayText: att.filename || att.name,
                                link: att.type === 'link' ? (att.file_path || att.path) : null,
                                createdAt: att.created_at
                            };
                        }) : [];

                        if (typeof viewCardAttachments !== 'undefined') {
                            viewCardAttachments = attachmentsFromBackend;
                        } else {
                            window.viewCardAttachments = attachmentsFromBackend;
                        }

                        // Render attachments in modal
                        if (typeof window.renderViewCardAttachments === 'function') {
                            window.renderViewCardAttachments();
                        }

                        // Load custom fields from backend
                        if (typeof viewCardCustomFields !== 'undefined') {
                            viewCardCustomFields.length = 0; // Clear existing array

                            if (card.custom_fields && Array.isArray(card.custom_fields)) {
                                card.custom_fields.forEach(field => {
                                    viewCardCustomFields.push({
                                        id: field.id,
                                        name: field.name,
                                        type: field.type,
                                        value: field.value,
                                        createdAt: field.created_at
                                    });
                                });
                            }
                        } else {
                            // Initialize if doesn't exist
                            window.viewCardCustomFields = Array.isArray(card.custom_fields) ?
                                card.custom_fields.map(field => ({
                                    id: field.id,
                                    name: field.name,
                                    type: field.type,
                                    value: field.value,
                                    createdAt: field.created_at
                                })) : [];
                        }

                        // Render custom fields using existing function
                        if (typeof window.renderViewCardCustomFields === 'function') {
                            window.renderViewCardCustomFields();
                        }

                        // Show/hide add custom field button based on permissions
                        const addCustomFieldBtn = document.getElementById('viewCustomFieldDropdownBtn');
                        if (addCustomFieldBtn) {
                            addCustomFieldBtn.style.display = card.can_edit ? 'inline-block' : 'none';
                        }

                        // Disable/enable custom field inputs based on permissions
                        const customFieldInputs = document.querySelectorAll('.custom-field-input');
                        customFieldInputs.forEach(input => {
                            if (!card.can_edit) {
                                input.readOnly = true;
                                input.style.cursor = 'default';
                                input.style.backgroundColor = '#f8f9fa';
                            } else {
                                input.readOnly = false;
                                input.style.cursor = 'text';
                                input.style.backgroundColor = '';
                            }
                        });

                        // Hide action buttons (edit/remove) if user cannot edit
                        if (!card.can_edit) {
                            const customFieldActions = document.querySelectorAll('.custom-field-action-btn');
                            customFieldActions.forEach(btn => {
                                btn.style.display = 'none';
                            });
                        }

                        // Load comments and activities for this card
                        loadCardCommentsAndActivities(taskId);

                        // Load reminder data
                        if (typeof window.loadReminderFromCard === 'function') {
                            window.loadReminderFromCard(card);
                        }

                        // Mark as successfully loaded
                        modalElement.setAttribute('data-load-success', 'true');

                        // Hide loading and show content
                        setTimeout(() => {
                            document.getElementById('cardModalLoading').classList.add('d-none');
                            document.getElementById('cardModalContent').classList.remove('loading');
                        }, 300);

                    } else {
                        throw new Error(data.message || 'Failed to load card data');
                    }
                })
                .catch(error => {
                    console.error('Error loading card data:', error);

                    // Mark as failed to load
                    modalElement.setAttribute('data-load-success', 'false');

                    // Hide loading and show error state
                    document.getElementById('cardModalLoading').classList.add('d-none');
                    document.getElementById('cardModalContent').classList.remove('loading');

                    // Show error message
                    document.getElementById('cardUser').textContent = 'Error loading data';
                    document.getElementById('cardTitle').textContent = 'Error loading card details';
                    const editor = document.getElementById('cardDescriptionEditor');
                    if (editor) {
                        if ($(editor).data('summernote')) {
                            $(editor).summernote('disable');
                        } else {
                            editor.disabled = true;
                            editor.style.cursor = 'not-allowed';
                        }
                    }
                    document.getElementById('cardDueDate').disabled = true;
                });
        } else {
            modal.show();
        }
    }

    // Function to load existing comments and activities for a card
    function loadCardCommentsAndActivities(cardId) {
        const commentsFeed = document.querySelector('.comments-feed');
        if (!commentsFeed || !cardId) return;

        // Show loading state
        commentsFeed.innerHTML =
            '<div class="text-center py-3"><small class="text-muted">Loading comments and activities...</small></div>';

        // Use activities from current card data if available
        if (currentCardData && currentCardData.activities) {
            // Combine comments and activities
            const comments = currentCardData.comments || [];
            const activities = currentCardData.activities || [];

            // Filter out comment_added activities (we show actual comments instead)
            const filteredActivities = activities.filter(activity =>
                activity.action !== 'comment_added'
            );

            // Format activities for display
            const formattedActivities = filteredActivities.map(activity => ({
                ...activity,
                type: 'activity',
                content: formatActivityDescription(activity)
            }));

            // Format comments for display - PRESERVE replies structure
            const formattedComments = comments.map(comment => {
                return {
                    ...comment,
                    type: 'comment',
                    replies: comment.replies || [] // Ensure replies array exists
                };
            });

            // Combine and sort by created_at
            const combinedItems = [...formattedComments, ...formattedActivities]
                .sort((a, b) => new Date(b.created_at) - new Date(a.created_at));

            displayCommentsAndActivities(combinedItems);
        } else {
            // Fallback to separate API call for comments only
            loadCardComments(cardId);
        }
    }

    // Function to apply bold formatting to quoted text and dates
    function applyActivityFormatting(text) {
        if (!text) return text;

        // Pattern 1: Bold quoted text and remove the quotes
        // Example: updated card title "Old Title" to "New Title"
        // Result: updated card title <strong>Old Title</strong> to <strong>New Title</strong>
        let formatted = text.replace(/"([^"]+)"/g, '<strong>$1</strong>');

        // Pattern 2: Bold dates (e.g., Oct 21, 2025)
        formatted = formatted.replace(/\b([A-Z][a-z]{2} \d{1,2}, \d{4})\b/g, '<strong>$1</strong>');

        return formatted;
    }

    // Function to format activity description
    function formatActivityDescription(activity) {
        // Use the description from the database if available (already formatted by NotificationHelper)
        if (activity.description) {
            // Get the username to prepend
            let username = activity.user ? activity.user.name : activity.user_create;
            // Capitalize "system" to "System"
            if (username && username.toLowerCase() === 'system') {
                username = 'System';
            }
            // The description doesn't include username anymore (for consistency)
            // Prepend it here and apply formatting
            return applyActivityFormatting(`${username} ${activity.description}`);
        }

        // Fallback for activities without description (legacy support)
        const username = activity.user ? activity.user.name : activity.user_create;
        const action = activity.action;
        let details = {};

        try {
            details = typeof activity.data === 'string' ? JSON.parse(activity.data) : activity.data || {};
        } catch (e) {
            details = {};
        }

        switch (action) {
            case 'card_created':
                const listName = details.list_name || 'list';
                return applyActivityFormatting(`${username} added this card to "${listName}"`);

            case 'card_updated':
                if (details.field) {
                    switch (details.field) {
                        case 'title':
                            return applyActivityFormatting(`${username} changed the title`);
                        case 'description':
                            return applyActivityFormatting(`${username} updated the description`);
                        case 'priority':
                            const newPriority = details.new_value || '';
                            return applyActivityFormatting(`${username} set priority to "${newPriority}"`);
                        case 'due_date':
                            return applyActivityFormatting(`${username} changed the due date`);
                        default:
                            return applyActivityFormatting(`${username} updated the card`);
                    }
                }
                return applyActivityFormatting(`${username} updated the card`);

            case 'card_moved':
                const fromList = details.from_list || 'list';
                const toList = details.to_list || 'list';
                return applyActivityFormatting(`${username} moved this card from "${fromList}" to "${toList}"`);

            case 'attachment_added':
                const fileName = details.file_name || 'file';
                return applyActivityFormatting(`${username} added attachment "${fileName}"`);

            case 'attachment_removed':
                const removedFileName = details.file_name || 'file';
                return applyActivityFormatting(`${username} removed attachment "${removedFileName}"`);

            case 'member_added':
                const memberName = details.member_name || 'member';
                return applyActivityFormatting(`"${memberName}" has been added as a member on this card`);

            case 'member_removed':
                const removedMemberName = details.member_name || 'member';
                const removedBy = details.removed_by || username;
                return applyActivityFormatting(`${username} removed "${removedMemberName}" from this card`);

            case 'user_mentioned':
                const mentionedUser = details.mentioned_user || 'you';
                const cardTitle = details.card_title || 'this card';
                return applyActivityFormatting(`${username} mentioned ${mentionedUser} in a comment on "${cardTitle}"`);

            default:
                return applyActivityFormatting(`${username} ${action}`);
        }
    }

    // Function to load existing comments for a card (fallback)
    function loadCardComments(cardId) {
        const commentsFeed = document.querySelector('.comments-feed');
        if (!commentsFeed || !cardId) return;

        // Show loading state
        commentsFeed.innerHTML =
            '<div class="text-center py-3"><small class="text-muted">Loading comments...</small></div>';

        const commentsUrl = `{{ url('/boards/comments') }}?card_id=${cardId}`;

        fetch(commentsUrl, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                commentsFeed.innerHTML = data.success && data.comments ?
                    displayComments(data.comments) :
                    '<div class="text-center py-3"><small class="text-muted">No comments yet</small></div>';
            })
            .catch(error => {
                console.error('Error loading comments:', error);
                commentsFeed.innerHTML =
                    '<div class="text-center py-3"><small class="text-muted text-danger">Failed to load comments</small></div>';
            });
    }

    // Function to convert URLs to clickable links
    function linkifyText(text) {
        if (!text) return text;

        // First escape HTML to prevent XSS
        const div = document.createElement('div');
        div.textContent = text;
        let escapedText = div.innerHTML;

        // Regular expression to match URLs
        const urlRegex = /(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/g;

        // Replace URLs with clickable links
        return escapedText.replace(urlRegex, function(url) {
            return `<a href="${url}" target="_blank" rel="noopener noreferrer" class="comment-link">${url}</a>`;
        });
    }

    // Function to display comments and activities in the UI
    function displayCommentsAndActivities(items) {
        const commentsFeed = document.querySelector('.comments-feed');
        if (!commentsFeed) return;

        if (!items || items.length === 0) {
            commentsFeed.innerHTML =
                '<div class="text-center py-3"><small class="text-muted">No comments or activities yet</small></div>';
            return;
        }

        commentsFeed.innerHTML = '';

        items.forEach(item => {
                    const itemElement = document.createElement('div');
                    const isActivity = item.type === 'activity';

                    // Format date
                    const createdAt = new Date(item.created_at);
                    const timeStr = createdAt.toLocaleDateString('en-GB', {
                        day: '2-digit',
                        month: 'short',
                        year: 'numeric'
                    }) + ', ' + createdAt.toLocaleTimeString('en-US', {
                        hour: '2-digit',
                        minute: '2-digit',
                        hour12: false
                    });

                    if (isActivity) {
                        // Activity display with icon and formatted description
                        itemElement.className = 'activity-item';

                        // Get user image for activities - prioritize user.image, fall back to activity icon
                        let activityIcon = '';
                        let userName = item.user?.name || item.user_create || 'Unknown User';

                        if (item.user?.image) {
                            activityIcon =
                                `<img src="${item.user.image}" alt="${userName}" class="activity-icon view-card-avatar">`;
                        } else {
                            // Default activity icon
                            activityIcon = `<div class="activity-icon"><i class="fas fa-history"></i></div>`;
                        }

                        itemElement.innerHTML = `
          <div class="d-flex align-items-start">
            ${activityIcon}
            <div class="flex-grow-1 ms-2">
              <div class="activity-description">
                ${item.content}
                <div class="activity-time mt-1">${timeStr}</div>
              </div>
            </div>
          </div>
        `;
                    } else {
                        // Regular comment display
                        itemElement.className = 'comment-item';
                        itemElement.dataset.commentId = item.id;

                        // Get user image - prioritize user.image, fall back to generated avatar
                        let userImage = '';
                        let userName = item.user?.name || item.user_create || 'Unknown User';

                        if (item.user?.image) {
                            userImage = `<img src="${item.user.image}" alt="${userName}" class="comment-avatar">`;
                        } else {
                            // Generate colored avatar with initials
                            const initials = userName.split(' ').map(n => n.charAt(0).toUpperCase()).join('').substring(
                                0, 2);
                            userImage = `<div class="comment-avatar-placeholder">${initials}</div>`;
                        }

                        // Create original message preview for WhatsApp-style reply
                        let originalMessageHTML = '';
                        if (item.original_message) {
                            const truncatedContent = item.original_message.content.length > 80 ?
                                item.original_message.content.substring(0, 80) + '...' :
                                item.original_message.content;

                            originalMessageHTML = `
                <div class="original-message-preview">
                  <div class="original-message-header">
                    <i class="fas fa-reply me-1"></i>
                    <small class="original-message-author">Replying to <strong>${item.original_message.author}</strong></small>
                  </div>
                  <div class="original-message-text">${truncatedContent}</div>
                </div>
              `;
                        }

                        // No action buttons for archived cards (read-only)
                        let actionButtonsHTML = '';

                        // Add edited indicator if comment was edited
                        let editedIndicatorHTML = '';
                        if (item.is_edited) {
                            editedIndicatorHTML =
                                ' <small class="edited-indicator text-muted" style="font-size: 0.75em; margin-left: 0.5em;">(diubah)</small>';
                        }

                        itemElement.innerHTML = `
          <div class="d-flex align-items-start">
            ${userImage}
            <div class="flex-grow-1 ms-3">
              <div class="comment-author-info">
                <h6 class="comment-author-name">${userName}</h6>
                <span class="comment-timestamp">${timeStr}</span>
              </div>
              <div class="comment-bubble">
                ${originalMessageHTML}
                <p class="comment-content">${linkifyText(item.content)}${editedIndicatorHTML}</p>
              </div>
              <div class="comment-actions">
                ${actionButtonsHTML}
              </div>
              ${item.replies && item.replies.length > 0 ? `
                <div class="reply-thread">
                  <div class="reply-thread-header">
                    <span class="badge bg-info">
                      <i class="fas fa-comments me-1"></i>${item.replies.length} ${item.replies.length === 1 ? 'Reply' : 'Replies'}
                    </span>
                  </div>
                  ${item.replies.map(reply => {
                    const replyDate = new Date(reply.created_at);
                    const replyTimeStr = replyDate.toLocaleDateString('en-GB', {
                      day: '2-digit',
                      month: 'short',
                      year: 'numeric'
                    }) + ', ' + replyDate.toLocaleTimeString('en-US', {
                      hour: '2-digit',
                      minute: '2-digit',
                      hour12: false
                    });
                    
                    // Get reply user avatar
                    let replyAvatar = reply.user?.image || '/assets/img/team-2.jpg';
                    
                    // No action buttons for archived cards (read-only)
                    let replyActionButtons = '';

            // Add edited indicator for reply if edited
            let replyEditedIndicator = reply.is_edited ? ' <small class="edited-indicator text-muted" style="font-size: 0.75em; margin-left: 0.5em;">(diubah)</small>' : '';

            return `
                      <div class="reply-item" data-reply-id="${reply.id}">
                        <div class="d-flex align-items-start">
                          <i class="fas fa-corner-down-right reply-icon"></i>
                          <img src="${replyAvatar}" alt="${reply.user?.name || 'User'}" class="reply-avatar">
                          <div class="flex-grow-1 ms-2">
                            <div class="reply-bubble">
                              <div class="d-flex justify-content-between align-items-start mb-1">
                                <strong class="reply-author">${reply.user?.name || 'User'}</strong>
                                <small class="reply-time">${replyTimeStr}</small>
                              </div>
                              <p class="reply-content">${linkifyText(reply.content)}${replyEditedIndicator}</p>
                              <div class="reply-actions">
                                ${replyActionButtons}
                              </div>
                            </div>
                            ${reply.child_replies && reply.child_replies.length > 0 ? `
                              <div class="nested-replies">
                                <div class="nested-replies-header">
                                  <span class="badge bg-secondary">
                                    <i class="fas fa-level-down-alt me-1"></i>${reply.child_replies.length} Nested ${reply.child_replies.length === 1 ? 'Reply' : 'Replies'}
                                  </span>
                                </div>
                                ${reply.child_replies.map(childReply => {
                                  const childDate = new Date(childReply.created_at);
                                  const childTimeStr = childDate.toLocaleDateString('en-GB', {
                                    day: '2-digit',
                                    month: 'short',
                                    year: 'numeric'
                                  }) + ', ' + childDate.toLocaleTimeString('en-US', {
                                    hour: '2-digit',
                                    minute: '2-digit',
                                    hour12: false
                                  });
                                  
                                  let childAvatar = childReply.user?.image || '/assets/img/team-2.jpg';
                                  
                                  // No action buttons for archived cards (read-only)
                                  let childReplyActionButtons = '';

            // Add edited indicator for child reply if edited
            let childReplyEditedIndicator = childReply.is_edited ? ' <small class="edited-indicator text-muted" style="font-size: 0.75em; margin-left: 0.5em;">(diubah)</small>' : '';

            return `
                                    <div class="reply-item nested" data-reply-id="${childReply.id}">
                                      <div class="d-flex align-items-start">
                                        <i class="fas fa-level-down-alt nested-reply-icon"></i>
                                        <img src="${childAvatar}" alt="${childReply.user?.name || 'User'}" class="reply-avatar nested">
                                        <div class="flex-grow-1 ms-2">
                                          <div class="reply-bubble nested">
                                            <div class="d-flex justify-content-between align-items-start mb-1">
                                              <strong class="reply-author">${childReply.user?.name || 'User'}</strong>
                                              <small class="reply-time">${childTimeStr}</small>
                                            </div>
                                            <p class="reply-content">${linkifyText(childReply.content)}${childReplyEditedIndicator}</p>
                                            <div class="reply-actions">
                                              ${childReplyActionButtons}
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  `;
                    }).join('')
            } <
            /div>
        ` : ''}
                          </div>
                        </div>
                      </div>
                    `;
    }).join('')
    } <
    /div>
    ` : ''}
            </div>
          </div>
        `;
    }

    commentsFeed.appendChild(itemElement);
    });

    // Restore the global filter state after all items are rendered
    restoreFilterState();
    }

    // Function to restore global filter state
    function restoreFilterState() {
        // Get the global filter state from localStorage
        const savedFilter = getGlobalFilterState();

        // Apply the saved filter
        filterComments(savedFilter);
    }

    // Store global filter state using localStorage for persistence
    const FILTER_STORAGE_KEY = 'globalCardFilterState';

    // Get global filter state from localStorage
    function getGlobalFilterState() {
        try {
            const stored = localStorage.getItem(FILTER_STORAGE_KEY);
            return stored || 'all'; // Default to 'all'
        } catch (e) {
            console.error('Error reading filter state from localStorage:', e);
            return 'all';
        }
    }

    // Filter functions for comments and activities
    function filterComments(type) {
        const modalElement = document.getElementById('viewCardModal');
        if (!modalElement) return;

        const commentsFeed = modalElement.querySelector('.comments-feed');
        if (!commentsFeed) return;

        const commentItems = commentsFeed.querySelectorAll('.comment-item');
        const activityItems = commentsFeed.querySelectorAll('.activity-item');
        const filterText = modalElement.querySelector('#filterText');

        // Store the global filter state in localStorage
        saveGlobalFilterState(type);

        // Update filter text and show/hide items
        switch (type) {
            case 'all':
                commentItems.forEach(item => item.style.display = 'block');
                activityItems.forEach(item => item.style.display = 'block');
                if (filterText) filterText.textContent = 'All';
                break;
            case 'comments':
                commentItems.forEach(item => item.style.display = 'block');
                activityItems.forEach(item => item.style.display = 'none');
                if (filterText) filterText.textContent = 'Comments';
                break;
            case 'activities':
                commentItems.forEach(item => item.style.display = 'none');
                activityItems.forEach(item => item.style.display = 'block');
                if (filterText) filterText.textContent = 'Activities';
                break;
        }

        // Close dropdown after selection
        const filterDropdown = modalElement.querySelector('#filterDropdown');
        if (filterDropdown) {
            const dropdown = bootstrap.Dropdown.getInstance(filterDropdown);
            if (dropdown) {
                dropdown.hide();
            }
        }
    }

    // Save global filter state to localStorage
    function saveGlobalFilterState(filterType) {
        try {
            localStorage.setItem(FILTER_STORAGE_KEY, filterType);
        } catch (e) {
            console.error('Error saving filter state to localStorage:', e);
        }
    }

    $(document).ready(function() {
        initializeViewCardDescription();
        initializeViewCardCustomFields();
        initializeViewCardAttachments();
        initializeViewCardMembers();
    });
</script>