{{-- 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 modal-dialog-scrollable" 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">Memuat..</span>
                    </div>
                </div>
            </div>

            <div class="modal-header bg-primary justify-content-center position-relative">
                <h5 class="modal-title fw-bold text-white" id="viewCardModalLabel">
                    View Card
                </h5>
                <div class="position-absolute d-flex align-items-center gap-2" style="right: 3.5rem;">
                    <a href="#" class="btn btn-sm btn-outline-light d-none" id="goToBoardBtn" title="Buka Board"
                        style="font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 4px;">
                        <i class="fas fa-external-link-alt me-1"></i>
                        <span>Buka Board</span>
                    </a>
                    <button type="button" class="btn btn-sm btn-outline-light" id="toggleRightColumnBtn"
                        title="Sembunyikan/Tampilkan Komentar & Aktivitas"
                        style="font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 4px;">
                        <i class="fas fa-comments me-1" id="toggleRightColumnIcon"></i>
                        <span id="toggleRightColumnText">Sembunyikan</span>
                    </button>
                </div>
                <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 view-card-main-content">
                    {{-- Left Column - Card Details --}}
                    <div class="col-12 col-lg-7 p-3 p-lg-4 view-card-left-column">
                        <div class="mb-4">
                            <h6 class="text-center view-card-priority" id="cardPriority"
                                style="background: #1890FF; color: #ffffff;">NORMAL</h6>
                        </div>
                        <div class="mb-3">
                            <div class="d-flex align-items-center gap-3">
                                <h5 class="fw-bold mb-0 text-uppercase text-nowrap view-card-user-label" id="cardUser">
                                    User</h5>
                                <span class="text-muted" style="font-size: 20px; font-weight: 300;">|</span>
                                <textarea class="view-card-title-input mb-0 flex-grow-1" rows="1" id="cardTitle">Card title</textarea>
                            </div>
                            <hr class="mt-2 mb-0" style="border-color: #dee2e6; opacity: 0.6;">
                        </div>
                        <div class="mb-4">
                            <div class="row">
                                <div class="col-md-4" id="dibuatPadaColumn">
                                    <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" id="deadlineColumn">
                                    <label class="fw-bold mb-2" id="deadlineLabel">Deadline</label>
                                    <div class="input-group">
                                        <input type="date" class="form-control view-card-form-input"
                                            id="cardDueDate">
                                    </div>
                                </div>
                                <div class="col-md-4" id="reminderColumn">
                                    <label class="fw-bold mb-2">Atur reminder</label>
                                    <div class="reminder-dropdown">
                                        <button
                                            class="btn btn-outline-primary btn-sm dropdown-toggle w-100 view-card-action-btn"
                                            type="button" id="reminderDropdown" data-bs-toggle="dropdown"
                                            aria-expanded="false">
                                            <i class="fas fa-bell me-1"></i>
                                            <span id="reminderButtonText">Tidak ada</span>
                                        </button>
                                        <div class="dropdown-menu dropdown-menu-end view-card-dropdown-menu p-3"
                                            style="width: 280px;" aria-labelledby="reminderDropdown">
                                            <h6 class="dropdown-header px-0 text-dark fw-bold mb-3">
                                                <i class="fas fa-bell me-2"></i>Atur Reminder
                                            </h6>

                                            {{-- Quick Options --}}
                                            <small class="text-muted d-block mb-2">Berdasarkan tanggal deadline</small>
                                            <div class="d-grid gap-2">
                                                <button
                                                    class="btn btn-sm btn-outline-secondary text-start reminder-option"
                                                    data-type="quick" data-value="none">
                                                    <i class="fas fa-bell-slash me-2"></i>Tidak ada
                                                </button>
                                                <button
                                                    class="btn btn-sm btn-outline-secondary text-start reminder-option"
                                                    data-type="quick" data-value="1">
                                                    <i class="fas fa-clock me-2"></i>1 hari sebelum
                                                </button>
                                                <button
                                                    class="btn btn-sm btn-outline-secondary text-start reminder-option"
                                                    data-type="quick" data-value="2">
                                                    <i class="fas fa-clock me-2"></i>2 hari sebelum
                                                </button>
                                                <button
                                                    class="btn btn-sm btn-outline-secondary text-start reminder-option"
                                                    data-type="quick" data-value="3">
                                                    <i class="fas fa-clock me-2"></i>3 hari sebelum
                                                </button>
                                                <button
                                                    class="btn btn-sm btn-outline-secondary text-start reminder-option"
                                                    data-type="quick" data-value="7">
                                                    <i class="fas fa-clock me-2"></i>1 minggu sebelum
                                                </button>
                                            </div>

                                            {{-- Active Reminder Display --}}
                                            <div id="activeReminderDisplay" class="alert alert-info mt-3 mb-0 d-none"
                                                style="font-size: 0.875rem;">
                                                <div class="d-flex justify-content-between align-items-start">
                                                    <div>
                                                        <i class="fas fa-bell me-2"></i>
                                                        <strong>Aktif:</strong>
                                                        <div class="mt-1" id="activeReminderText"></div>
                                                    </div>
                                                    <button class="btn btn-sm btn-link text-danger p-0"
                                                        id="clearReminderBtn" title="Hapus reminder">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </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>
                        {{-- Intern Tasks Section (MIS Feature) --}}
                        <div class="mb-4" id="internTasksSection" style="display: none;">
                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                                <label class="fw-bold mb-0">Tugas</label>
                                <div class="d-flex align-items-center gap-2">
                                    <div class="input-group input-group-sm" style="width: 200px;">
                                        <span class="input-group-text bg-white"><i
                                                class="fas fa-search text-muted"></i></span>
                                        <input type="text" class="form-control" id="internTaskSearch"
                                            placeholder="Cari tugas...">
                                    </div>
                                    {{-- Filter Status --}}
                                    <select class="form-select form-select-sm" id="internTaskFilterStatus"
                                        style="width: 150px;">
                                        <option value="">Semua Status</option>
                                        <option value="Belum Mulai">Belum Mulai</option>
                                        <option value="Sedang Dikerjakan">Dikerjakan</option>
                                        <option value="Selesai">Selesai</option>
                                        <option value="Tertunda">Tertunda</option>
                                    </select>
                                    <button type="button" class="btn btn-outline-primary btn-sm"
                                        id="addInternTaskBtn">
                                        <i class="fas fa-plus me-1"></i> Tambah Tugas
                                    </button>
                                </div>
                            </div>
                            <div class="table-responsive mt-3" id="internTasksTableContainer" style="display: none;">
                                <table class="table table-bordered table-hover table-sm">
                                    <thead class="table-light">
                                        <tr>
                                            <th style="width: 20%;">Website</th>
                                            <th style="width: 30%;">Uraian</th>
                                            <th style="width: 15%;">Deadline</th>
                                            <th style="width: 18%;">Status</th>
                                            <th style="width: 12%;">Catatan</th>
                                            <th style="width: 5%;">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody id="internTasksTableBody">
                                        <!-- Tasks will be rendered here dynamically -->
                                    </tbody>
                                </table>
                                {{-- Pagination Controls --}}
                                <div id="internTasksPagination"
                                    class="justify-content-between align-items-center mt-2 px-2 d-none">
                                    <small class="text-muted" id="internTasksInfo">
                                        Menampilkan 0 dari 0 tugas
                                    </small>

                                    <nav aria-label="Pagination tugas intern">
                                        <ul class="pagination pagination-sm mb-0" id="internTasksPaginationNav">
                                            <!-- Pagination buttons rendered by JS -->
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                            <div id="noInternTasksMessage" class="text-muted text-center py-3"
                                style="display: none;">
                                Belum ada tugas. Klik "Tambah Tugas" untuk menambahkan.
                            </div>
                            {{-- Intern Tasks Status Chart --}}
                            <div id="internTasksChartContainer" class="mt-3" style="display: none;">
                                <label class="fw-bold mb-2">Grafik Status Tugas</label>
                                <div id="internTasksChart" style="width: 100%; height: 260px;"></div>
                            </div>
                        </div>

                        <div class="mb-4">
                            <div class="d-flex justify-content-between align-items-center">
                                <label class="fw-bold mb-0">Field kustom</label>
                                <div class="dropdown custom-field-dropdown">
                                    <button type="button" class="btn btn-outline-primary btn-sm dropdown-toggle"
                                        id="viewCustomFieldDropdownBtn" data-bs-toggle="dropdown"
                                        aria-expanded="false">
                                        <i class="fas fa-plus me-1"></i> Tambah
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-end py-0"
                                        aria-labelledby="viewCustomFieldDropdownBtn" style="width: 350px;"
                                        data-bs-auto-close="outside">
                                        <div class="dropdown-header text-center">
                                            <h5 class="dropdown-title fw-bold mt-2">
                                                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>
                                                <div class="position-relative">
                                                    <input type="text" class="form-control"
                                                        id="viewCustomFieldName" placeholder="Tambah nama field.."
                                                        autocomplete="off">
                                                    <div id="fieldNameSuggestions"
                                                        class="field-name-suggestions d-none"></div>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <h6 class="dropdown-label text-dark mb-2">Tipe field</h6>
                                                <select class="form-select" id="viewCustomFieldType">
                                                    <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-primary btn-sm"
                                                    id="viewCreateCustomField">
                                                    <span class="btn-text">Tambah</span>
                                                    <span class="btn-loading d-none text-white">
                                                        <i class="fas fa-spinner fa-spin me-1"></i>Menambahkan..
                                                    </span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="viewCustomFieldsContainer"></div>

                            @include('pages.misintern.modals.intern-task-modal')

                            {{-- 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>
                                        <div class="position-relative">
                                            <input type="text" class="form-control" id="viewEditCustomFieldName"
                                                placeholder="Tambah nama field.." autocomplete="off">
                                            <div id="editFieldNameSuggestions" class="field-name-suggestions d-none">
                                            </div>
                                        </div>
                                    </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>

                            {{-- Confirm Remove Custom Field Dropdown --}}
                            <div id="viewConfirmRemoveCustomFieldDropdown" class="dropdown-menu py-0"
                                style="width: 320px; display: none;">
                                <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 Field Kustom
                                    </h5>
                                </div>
                                <div class="dropdown-content pb-0 p-3">
                                    <p class="mb-2">Apakah Anda yakin ingin menghapus field kustom ini?</p>
                                    <div class="d-flex justify-content-end gap-2">
                                        <button type="button" class="btn btn-secondary btn-sm"
                                            id="viewCancelRemoveCustomFieldBtn">Batal</button>
                                        <button type="button" class="btn btn-danger btn-sm"
                                            id="viewConfirmRemoveCustomFieldBtn">
                                            <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 class="mb-4">
                            <div class="d-flex justify-content-between align-items-center">
                                <label class="fw-bold mb-0">Lampiran</label>
                                <div class="dropdown attachment-dropdown">
                                    <button type="button" class="btn btn-outline-primary btn-sm mt-3 dropdown-toggle"
                                        id="viewCardAttachmentsDropdownBtn" data-bs-toggle="dropdown"
                                        aria-expanded="false">
                                        <i class="fas fa-paperclip me-1"></i> Tambah
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-end py-0"
                                        aria-labelledby="viewCardAttachmentsDropdownBtn" style="width: 350px;"
                                        data-bs-auto-close="outside">
                                        <div class="dropdown-header text-center">
                                            <h5 class="dropdown-title fw-bold mt-2">
                                                Lampiran
                                            </h5>
                                        </div>
                                        <div class="dropdown-content pb-0 p-3">
                                            <div class="attach-file-section mb-3">
                                                <h6 class="dropdown-label text-dark mb-2">Lampirkan file dari komputer
                                                    Anda</h6>
                                                <input type="file" class="form-control d-none"
                                                    id="viewCustomCardAttachmentInput" multiple>
                                                <button type="button"
                                                    class="btn btn-outline-primary btn-sm w-100 mb-0"
                                                    id="viewCustomChooseFileBtn">
                                                    <span class="btn-text">Pilih file</span>
                                                    <span class="btn-loading d-none">
                                                        <i class="fas fa-spinner fa-spin me-1"></i>Mengunggah..
                                                    </span>
                                                </button>
                                                <small class="text-muted d-block mt-1">Maksimal 5 file, 10MB setiap
                                                    file</small>
                                            </div>
                                            <div class="mb-3">
                                                <h6 class="dropdown-label text-dark mb-2">Tempel tautan</h6>
                                                <input type="text" class="form-control" id="viewCardLinkInput"
                                                    placeholder="Tempel tautan baru">
                                            </div>
                                            <div class="mb-3">
                                                <h6 class="dropdown-label text-dark mb-2">Teks tampilan
                                                    <small>(opsional)</small>
                                                </h6>
                                                <input type="text" class="form-control" id="viewDisplayInput"
                                                    placeholder="Teks untuk ditampilkan">
                                            </div>
                                            <div class="d-flex justify-content-end mt-3">
                                                <button type="button" class="btn btn-primary btn-sm"
                                                    id="viewInsertAttachmentBtn">
                                                    <span class="btn-text">Masukkan</span>
                                                    <span class="btn-loading d-none text-white">
                                                        <i class="fas fa-spinner fa-spin me-1"></i>Memasukkan..
                                                    </span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="viewAttachmentsContainer"></div>
                            {{-- Edit links dropdown --}}
                            <div id="viewEditLinkDropdown" class="dropdown-menu" style="display:none; width:350px;">
                                <div class="dropdown-header text-center">
                                    <h5 class="dropdown-title fw-bold">Ubah Tautan</h5>
                                </div>
                                <div class="dropdown-content pb-0 p-3">
                                    <div class="mb-3">
                                        <h6 class="dropdown-label text-dark mb-2">Tempel tautan</h6>
                                        <input type="text" class="form-control" id="viewEditCardLinkInput"
                                            placeholder="Tempel tautan baru">
                                    </div>
                                    <div class="mb-3">
                                        <h6 class="dropdown-label text-dark mb-2">Teks tampilan
                                            <small>(opsional)</small>
                                        </h6>
                                        <input type="text" class="form-control" id="viewEditDisplayInput"
                                            placeholder="Teks untuk ditampilkan">
                                    </div>
                                    <div class="d-flex justify-content-end mt-3">
                                        <button type="button" class="btn btn-primary btn-sm"
                                            id="viewSaveEditLinkBtn">
                                            <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>
                                        <button type="button" class="btn btn-secondary btn-sm ms-2"
                                            id="viewCancelEditLinkBtn">Batal</button>
                                    </div>
                                </div>
                            </div>

                            {{-- Confirm Remove Attachment Dropdown --}}
                            <div id="viewConfirmRemoveAttachmentDropdown" class="dropdown-menu py-0"
                                style="width: 320px; display: none;">
                                <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 Lampiran
                                    </h5>
                                </div>
                                <div class="dropdown-content pb-0 p-3">
                                    <p class="mb-2">Apakah Anda yakin ingin menghapus lampiran ini?</p>
                                    <p class="text-muted mb-3"><small>Tindakan ini tidak dapat dibatalkan.</small></p>
                                    <div class="d-flex justify-content-end gap-2">
                                        <button type="button" class="btn btn-secondary btn-sm"
                                            id="viewCancelRemoveAttachmentBtn">Batal</button>
                                        <button type="button" class="btn btn-danger btn-sm"
                                            id="viewConfirmRemoveAttachmentBtn">
                                            <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 class="mb-4">
                            <div class="d-flex justify-content-between align-items-center">
                                <label class="fw-bold mb-0">Anggota board</label>
                                <div class="dropdown member-dropdown">
                                    <button type="button" class="btn btn-outline-primary btn-sm mt-3 dropdown-toggle"
                                        id="viewCardMembersDropdownBtn" data-bs-toggle="dropdown"
                                        aria-expanded="false">
                                        <i class="fas fa-user-plus me-1"></i> Tambah
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-end py-0"
                                        aria-labelledby="viewCardMembersDropdownBtn"
                                        style="width: 350px; max-height: 500px; overflow-y: auto;"
                                        data-bs-auto-close="outside">
                                        <div class="dropdown-header text-center">
                                            <h5 class="dropdown-title fw-bold mt-2">
                                                Anggota
                                            </h5>
                                        </div>
                                        <div class="dropdown-content p-3">
                                            <div class="mb-3">
                                                <input type="text" class="form-control form-control"
                                                    id="viewCardMemberSearch" placeholder="Cari anggota..">
                                            </div>
                                            <div class="mb-3">
                                                <h6 class="dropdown-label text-dark mb-2">Anggota yang dipilih</h6>
                                                <div id="viewCardBoardMembers"
                                                    style="max-height: 150px; overflow-y: auto;">
                                                    <p class="dropdown-label text-muted mb-0 text-center py-2">Tidak
                                                        ada anggota</p>
                                                </div>
                                            </div>
                                            <div>
                                                <h6 class="dropdown-label  text-dark mb-2">Anggota board yang tersedia
                                                </h6>
                                                <div id="viewCardAvailableUsers">
                                                    <p class="dropdown-label text-center py-2 text-muted">Memuat
                                                        anggota...</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="viewCardMembersContainer"></div>
                            <input type="hidden" id="viewCardSelectedMemberIds" name="view_card_member_ids"
                                value="">
                        </div>
                    </div>

                    {{-- Right Column - Comments and Activities --}}
                    <div class="col-12 col-lg-5 view-card-right-column">
                        <div class="bg-light h-100 p-3 p-lg-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>

                            {{-- Comment Input Section --}}
                            <div class="comment-input-wrapper mb-2">
                                {{-- Reply Preview (WhatsApp-style) --}}
                                <div id="reply-preview" class="reply-preview d-none mb-2">
                                    <div class="reply-preview-content">
                                        <div class="reply-preview-header">
                                            <i class="fas fa-reply me-2"></i>
                                            <span>Membalas kepada&nbsp;<strong id="reply-to-user"></strong></span>
                                            <button type="button" class="btn-close-reply"
                                                onclick="closeReplyPreview()">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                        <div class="reply-preview-text" id="reply-preview-text"></div>
                                    </div>
                                </div>

                                <div class="comment-input-group">
                                    <textarea id="comment-input" class="form-control view-card-form-input comment-textarea"
                                        placeholder="Tulis komentar.." rows="1"></textarea>
                                </div>

                                {{-- Action Buttons (Hidden by default, shown on focus) --}}
                                <div id="comment-action-buttons" class="comment-action-buttons d-none">
                                    <button type="button" id="cancelCommentBtn"
                                        class="btn btn-sm btn-outline-secondary">
                                        Batal
                                    </button>
                                    <button type="button" id="addCommentBtn" class="btn btn-sm btn-primary">
                                        <i class="fas fa-paper-plane me-1"></i>
                                        Kirim
                                    </button>
                                </div>

                                {{-- Mention Dropdown - positioned absolutely within this container --}}
                                <div id="mention-dropdown" class="mention-dropdown d-none">
                                    <div class="mention-header">
                                        <small class="text-muted">Mention anggota</small>
                                    </div>
                                    <div id="mention-list" class="mention-list">
                                        {{-- Dynamic mention suggestions will be populated here --}}
                                    </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: absolute; 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>
</div>

{{-- Preview Bottom Bar - COMPLETELY OUTSIDE modal for proper fixed positioning --}}
<div id="previewBottomBar"
    style="position: fixed; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.95); z-index: 999999; display: none; align-items: center; justify-content: space-between; padding: 16px 24px;">
    <div>
        <div id="previewFilename" style="color: #fff; font-size: 15px; font-weight: 600;">filename.jpg</div>
        <div id="previewMeta" style="color: rgba(255,255,255,0.6); font-size: 13px;">Added Dec 18, 2025</div>
    </div>
    <div style="display: flex; gap: 8px;">
        <a href="#" id="openNewTabBtn" target="_blank"
            style="color: #fff; text-decoration: none; padding: 8px 16px; border-radius: 4px; font-size: 13px; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.1);">
            <i class="fas fa-external-link-alt"></i> Open in new tab
        </a>
        <button type="button" id="downloadBtn"
            style="color: #fff; border: none; padding: 8px 16px; border-radius: 4px; font-size: 13px; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.1); cursor: pointer;">
            <i class="fas fa-download"></i> Download
        </button>
    </div>
</div>


{{-- Trello-Style Preview Modal --}}
<div class="modal fade" id="previewModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="false"
    data-bs-keyboard="false" style="overflow: hidden !important;">
    <div class="modal-dialog modal-fullscreen m-0 p-0"
        style="max-width: 100vw !important; overflow: hidden !important;">
        <div class="modal-content border-0 rounded-0"
            style="background: rgba(0,0,0,0.9) !important; height: 100vh !important; overflow: hidden !important;">
            <div class="modal-body d-flex align-items-center justify-content-center p-0" id="previewModalBody"
                style="height: 100vh; cursor: pointer; overflow: hidden !important;">
                <div class="file-container text-center" id="fileContainer"
                    style="padding-bottom: 70px; overflow: hidden !important;">
                    <img id="previewModalImg" src="" alt="Preview"
                        style="max-width: 90vw; max-height: calc(100vh - 140px); cursor: zoom-in; box-shadow: 0 8px 32px rgba(0,0,0,0.5); border-radius: 4px; transition: transform 0.3s ease;" />
                    <iframe id="previewModalPdf" class="d-none"
                        style="width: 80vw; height: calc(100vh - 140px); border: none; border-radius: 4px;"></iframe>
                    <pre id="previewModalText" class="d-none text-white bg-dark p-3 rounded"
                        style="max-width: 90vw; max-height: calc(100vh - 140px); overflow: auto;"></pre>
                    <div id="previewModalGeneric" class="d-none text-white text-center"></div>
                </div>
            </div>
        </div>
    </div>
</div>

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

    /* Intern Tasks Section Styles (MIS Feature) */
    #internTasksSection .table {
        font-size: 0.875rem;
        margin-bottom: 0;
    }

    #internTasksSection .table th {
        font-weight: 600;
        white-space: nowrap;
        vertical-align: middle;
    }

    #internTasksSection .table td {
        vertical-align: middle;
    }

    #internTasksSection .task-status-select {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        min-width: 130px;
    }

    #internTasksSection .task-website,
    #internTasksSection .task-uraian,
    #internTasksSection .task-catatan {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 150px;
    }

    #internTasksSection .btn-group-sm .btn {
        padding: 0.2rem 0.4rem;
    }

    #internTaskFilterStatus {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
        border-color: #dee2e6;
    }

    #internTaskFilterStatus:focus {
        border-color: #86b7fe;
        box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, .25);
    }

    /* Intern Task Modal z-index higher than view card modal */
    #internTaskModal {
        z-index: 10600 !important;
    }

    #internTaskModal .modal-backdrop {
        z-index: 10599 !important;
    }

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

    #cardModalContent {
        height: 100% !important;
    }

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

    /* Desktop view - ensure columns are scrollable */
    @media (min-width: 992px) {
        #viewCardModal .modal-body {
            overflow: hidden !important;
        }

        .view-card-left-column {
            overflow-y: auto !important;
            overflow-x: hidden !important;
            max-height: calc(90vh - 60px) !important;
            transition: flex 0.35s ease, max-width 0.35s ease;
        }

        .view-card-right-column {
            overflow-y: auto !important;
            overflow-x: hidden !important;
            max-height: calc(90vh - 60px) !important;
            transition: flex 0.35s ease, max-width 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
        }

        /* Right column hidden state */
        .view-card-right-column.right-column-hidden {
            flex: 0 0 0% !important;
            max-width: 0% !important;
            opacity: 0;
            padding: 0 !important;
            overflow: hidden !important;
            pointer-events: none;
        }

        /* Left column expanded state when right column is hidden */
        .view-card-left-column.left-column-expanded {
            flex: 0 0 100% !important;
            max-width: 100% !important;
        }
    }

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

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

    /* Ensure dropdown containers have proper positioning context */
    #viewCardModal .dropdown,
    #viewCardModal .attachment-dropdown,
    #viewCardModal .custom-field-dropdown,
    #viewCardModal .member-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-user-label {
        font-size: 18px;
        color: #3a6f7a;
        line-height: 1.4;
        letter-spacing: 0.5px;
    }

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

    .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;
    }

    .selected-member-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50% !important;
        object-fit: cover;
    }

    .selected-member-item {
        border-radius: 8px !important;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .selected-member-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .selected-member-dropdown-item {
        border-radius: 8px !important;
    }

    /* Custom tooltip styling for member hover */
    .tooltip-inner {
        background-color: #2c3e50 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        padding: 8px 12px;
        font-size: 13px;
        max-width: 300px;
    }

    .tooltip.bs-tooltip-top .tooltip-arrow::before {
        border-top-color: #2c3e50 !important;
    }

    .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
        border-bottom-color: #2c3e50 !important;
    }

    .tooltip.bs-tooltip-start .tooltip-arrow::before {
        border-left-color: #2c3e50 !important;
    }

    .tooltip.bs-tooltip-end .tooltip-arrow::before {
        border-right-color: #2c3e50 !important;
    }

    .selected-member-dropdown-item,
    .user-item {
        display: flex !important;
        align-items: center !important;
        padding: 8px 12px !important;
        cursor: pointer !important;
        transition: background-color 0.2s ease !important;
        border-radius: 6px !important;
        gap: 12px !important;
        border: none !important;
        background: transparent !important;
        width: 100% !important;
        text-align: left !important;
    }

    .selected-member-dropdown-item:hover,
    .user-item:hover {
        background-color: #f8f9fa !important;
    }

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

    .user-info {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
    }

    .user-info h6 {
        margin: 0 !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        color: #2d3748 !important;
        line-height: 1.2 !important;
    }

    .user-info small {
        font-size: 0.75rem !important;
        color: #718096 !important;
        line-height: 1.2 !important;
    }

    .remove-member-btn {
        background: none !important;
        border: none !important;
        color: #e53e3e !important;
        font-size: 1.25rem !important;
        cursor: pointer !important;
        padding: 0 4px !important;
        line-height: 1 !important;
        opacity: 0.7 !important;
        transition: opacity 0.2s !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }

    .remove-member-btn:hover {
        opacity: 1 !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 .attachment-dropdown .dropdown-toggle::after,
    #viewCardModal .custom-field-dropdown .dropdown-toggle::after,
    #viewCardModal .filter-dropdown .dropdown-toggle::after,
    #viewCardModal .member-dropdown .dropdown-toggle::after,
    #viewCardModal .reminder-dropdown .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;
    }

    /* ==================== Trello-Style Preview Modal ==================== */

    #previewModal {
        z-index: 99990 !important;
        overflow: hidden !important;
    }

    #previewModal .modal-dialog {
        z-index: 99991 !important;
        overflow: hidden !important;
    }

    #previewModal .modal-content {
        background: rgba(0, 0, 0, 0.9) !important;
        overflow: hidden !important;
    }

    #previewModal .modal-body {
        overflow: hidden !important;
    }

    #previewModal #fileContainer {
        overflow: hidden !important;
    }

    /* Close button hover */
    #closePreviewBtn:hover {
        background: rgba(0, 0, 0, 0.8) !important;
        border-color: rgba(255, 255, 255, 0.5) !important;
        transform: scale(1.05);
    }

    /* Bottom bar button hover */
    #previewBottomBar a:hover,
    #previewBottomBar button:hover {
        background: rgba(255, 255, 255, 0.2) !important;
    }

    /* Image zoom states - WITH PAN/DRAG (Dynamic, no crop) */
    #previewModalImg {
        transition: transform 0.3s ease;
        user-select: none;
        -webkit-user-drag: none;
    }

    #previewModalImg.zoomed {
        cursor: grab !important;
    }

    #previewModalImg.zoomed:active {
        cursor: grabbing !important;
    }

    /* 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;
    }

    /* Comment Input Wrapper */
    .comment-input-wrapper {
        position: relative;
    }

    /* Comment Input Group - Consistent with other inputs */
    .comment-input-group {
        display: flex;
        gap: 8px;
        align-items: flex-end;
    }

    .comment-textarea {
        flex: 1;
        resize: none;
        min-height: 38px;
        max-height: 150px;
        padding: 10px 14px;
        font-size: 0.875rem;
        border-radius: 6px;
        border: 1px solid #dee2e6;
        transition: all 0.2s ease;
        overflow-y: hidden;
        line-height: 1.5;
    }

    .comment-textarea:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.1);
        outline: none;
    }

    .comment-textarea::placeholder {
        color: #adb5bd;
    }

    /* Comment Action Buttons */
    .comment-action-buttons {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 8px;
    }

    .comment-action-buttons.d-none {
        display: none !important;
    }

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

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

    /* Remove old send button styles */
    .btn-send-comment {
        background: linear-gradient(135deg, #007bff, #0056b3);
        border: none;
        color: white;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    .btn-send-comment:hover {
        background: linear-gradient(135deg, #0056b3, #004085);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
    }

    .btn-send-comment:active {
        transform: translateY(0);
    }

    .btn-send-comment i {
        font-size: 0.875rem;
    }

    /* 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;
    }

    /* Comment Reaction Styling */
    .comment-reactions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 8px;
        align-items: center;
    }

    .reaction-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 8px;
        background: #f0f2f5;
        border: 1px solid #e4e6eb;
        border-radius: 20px;
        font-size: 13px;
        cursor: pointer;
        transition: all 0.2s ease;
        user-select: none;
    }

    .reaction-badge:hover {
        background: #e4e6eb;
        transform: scale(1.05);
    }

    .reaction-badge.user-reacted {
        background: #e7f3ff;
        border-color: #1877f2;
    }

    .reaction-badge .reaction-emoji {
        font-size: 14px;
    }

    .reaction-badge .reaction-count {
        font-size: 12px;
        font-weight: 500;
        color: #65676b;
    }

    .reaction-badge.user-reacted .reaction-count {
        color: #1877f2;
    }

    .add-reaction-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        background: #f0f2f5;
        border: 1px dashed #ccd0d5;
        border-radius: 50%;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s ease;
        color: #65676b;
    }

    .add-reaction-btn:hover {
        background: #e4e6eb;
        border-style: solid;
        transform: scale(1.1);
    }

    /* Emoji Picker Dropdown */
    .emoji-picker-dropdown {
        position: absolute;
        z-index: 10800;
        background: #fff;
        border: 1px solid #e4e6eb;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        padding: 8px;
        display: none;
    }

    .emoji-picker-dropdown.show {
        display: block;
    }

    .emoji-picker-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 4px;
    }

    .emoji-option {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        cursor: pointer;
        border-radius: 4px;
        transition: all 0.15s ease;
    }

    .emoji-option:hover {
        background: #f0f2f5;
        transform: scale(1.2);
    }

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

        100% {
            background: white;
        }
    }

    /* Mention Dropdown Styling */
    .mention-dropdown {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1060;
        background: white;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        margin-top: 50px;
        max-height: 300px;
        overflow-y: auto;
        min-width: 300px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    .mention-header {
        padding: 8px 16px;
        border-bottom: 1px solid #e9ecef;
        background: #f8f9fa;
        border-radius: 8px 8px 0 0;
    }

    .mention-list {
        padding: 4px;
        max-height: 250px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* 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 - Mobile First */

    /* Mobile view (< 992px) - Layout vertikal stacked */
    @media (max-width: 991.98px) {
        #viewCardModalDialog {
            max-width: 95vw !important;
            height: auto !important;
            max-height: 95vh !important;
            margin: 10px auto !important;
        }

        #viewCardModalContent {
            height: auto !important;
            max-height: 90vh !important;
            display: flex;
            flex-direction: column;
        }

        #viewCardModal .modal-body {
            flex: 1;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch;
            padding: 0 !important;
        }

        .view-card-main-content {
            height: auto !important;
            flex-direction: column !important;
            display: flex !important;
        }

        .view-card-left-column {
            overflow-y: visible !important;
            max-height: none !important;
            border-bottom: 1px solid #e9ecef;
            flex-shrink: 0;
        }

        .view-card-right-column {
            overflow-y: visible !important;
            max-height: none !important;
            min-height: 350px !important;
            flex-shrink: 0;
        }

        .view-card-comments-section {
            padding: 12px !important;
            min-height: 320px !important;
        }

        .comments-feed-wrapper {
            flex: 1;
            min-height: 150px;
        }

        .comments-feed {
            max-height: none !important;
            min-height: 150px;
            overflow-y: visible !important;
        }

        /* Tanggal section - stack vertikal di mobile */
        .view-card-left-column .row .col-md-4 {
            margin-bottom: 12px;
        }
    }

    /* Small mobile (< 768px) - Adjustment lebih kecil */
    @media (max-width: 767.98px) {
        #viewCardModalDialog {
            max-width: 98vw !important;
            margin: 5px auto !important;
        }

        .view-card-right-column {
            min-height: 300px !important;
        }

        .view-card-comments-section {
            padding: 10px !important;
            min-height: 280px !important;
        }

        .comments-feed {
            max-height: none !important;
            min-height: 120px;
        }

        .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;
        }

        /* Field kustom dropdown di mobile */
        .custom-field-dropdown .dropdown-menu,
        .attachment-dropdown .dropdown-menu {
            max-width: calc(100vw - 40px) !important;
            width: auto !important;
        }
    }

    /* Very small mobile (< 576px) */
    @media (max-width: 575.98px) {
        .view-card-left-column .mb-4 {
            margin-bottom: 0.75rem !important;
        }

        .view-card-title-input {
            font-size: 1rem;
        }

        #cardDescriptionEditor {
            min-height: 80px !important;
        }
    }

    /* Reply Preview Styling */
    .reply-preview {
        background: #fff;
        border: 1px solid #e9ecef;
        border-left: 3px solid #007bff;
        border-radius: 6px;
        padding: 8px 12px;
        margin-bottom: 8px;
    }

    .reply-preview-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.75rem;
        color: #007bff;
        margin-bottom: 4px;
    }

    .reply-preview-text {
        font-size: 0.8125rem;
        color: #6c757d;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .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 */
    .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;
    }

    /* 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);
    }

    /* Field Name Suggestions/Autocomplete */
    .field-name-suggestions {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 10700;
        background: #fff;
        border: 1px solid #dee2e6;
        border-top: none;
        border-radius: 0 0 6px 6px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        max-height: 200px;
        overflow-y: auto;
    }

    .field-name-suggestion-item {
        padding: 10px 12px;
        cursor: pointer;
        font-size: 14px;
        border-bottom: 1px solid #f0f0f0;
        transition: background-color 0.15s ease;
    }

    .field-name-suggestion-item:last-child {
        border-bottom: none;
    }

    .field-name-suggestion-item:hover,
    .field-name-suggestion-item.selected {
        background-color: #f8f9fa;
    }

    .field-name-suggestion-item .suggestion-text {
        color: #333;
    }

    .field-name-suggestion-item .suggestion-count {
        color: #6c757d;
        font-size: 12px;
        float: right;
    }

    .field-name-no-results {
        padding: 12px;
        text-align: center;
        color: #6c757d;
        font-size: 13px;
    }

    /* 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.

    // Helper function to show confirmation dropdown using Popper.js
    function showConfirmationDropdown(triggerElement, dropdownElement) {
        // Import Popper from Bootstrap
        const {
            createPopper
        } = window.Popper || window;

        if (!createPopper) {
            console.error('Popper.js not found');
            return null;
        }

        // Show the dropdown
        dropdownElement.style.display = 'block';

        // Create Popper instance
        const popperInstance = createPopper(triggerElement, dropdownElement, {
            placement: 'bottom-start',
            strategy: 'fixed',
            modifiers: [{
                    name: 'preventOverflow',
                    options: {
                        boundary: 'viewport',
                        padding: 8,
                        altAxis: true
                    }
                },
                {
                    name: 'flip',
                    options: {
                        fallbackPlacements: ['top-start', 'bottom-start', 'right-start', 'left-start'],
                        padding: 8
                    }
                },
                {
                    name: 'offset',
                    options: {
                        offset: [0, 4]
                    }
                }
            ]
        });

        return popperInstance;
    }

    let currentCardId = null;
    let currentCardData = null;

    // Debounce timers for optimized saving
    let saveTimers = {
        title: null,
        description: null,
        due_date: null
    };

    // Function to open the view card modal
    function openViewCardModal(taskId = null) {
        const modalElement = document.getElementById('viewCardModal');

        // Create modal with backdrop static and keyboard disabled during loading
        const modal = new bootstrap.Modal(modalElement, {
            backdrop: 'static',
            keyboard: false
        });

        // 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 = 'Tulis komentar..';
        }

        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');

            // Hide close button during loading
            const closeButton = modalElement.querySelector('.btn-close');
            if (closeButton) {
                closeButton.style.display = 'none';
            }

            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').value = '';
            document.getElementById('cardCreatedAt').value = '';
            document.getElementById('cardDueDate').value = '';

            const goToBoardBtn = document.getElementById('goToBoardBtn');
            if (goToBoardBtn) {
                goToBoardBtn.classList.add('d-none');
            }

            const url = new URL(window.location.href);
            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;
                        window.currentCardCanManageAttachments = card.can_manage_attachments;

                        // Check and handle Go to Board button visibility
                        const goToBoardBtnEl = document.getElementById('goToBoardBtn');
                        if (goToBoardBtnEl) {
                            const isCurrentBoard = window.location.pathname.includes('/boards/show/' + card
                                    .board_id) ||
                                window.location.pathname.includes('/misintern/show/' + card.board_id);
                            if (!isCurrentBoard) {
                                const baseUrl = card.enable_mis ? "{{ url('misintern/show') }}" :
                                    "{{ url('boards/show') }}";
                                goToBoardBtnEl.href = `${baseUrl}/${card.board_id}?card=${card.id}`;
                                goToBoardBtnEl.classList.remove('d-none');
                            } else {
                                goToBoardBtnEl.classList.add('d-none');
                            }
                        }

                        // 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_manage_attachments ? '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 =
                                    'Hanya pembuat card atau board admin yang dapat mengubah reminder!';
                            } 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').value = card.title;
                        document.getElementById('cardTitle').setAttribute('data-original-title', card.title);
                        document.getElementById('cardTitle').setAttribute('data-card-id', taskId);

                        // Auto-resize card title after setting value
                        setTimeout(() => {
                            if (typeof autoResizeCardTitle === 'function') {
                                autoResizeCardTitle();
                            }
                        }, 50);

                        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);
                        }

                        // Load intern tasks (MIS Feature) - only if enabled for this board
                        if (typeof window.showInternTasksSection === 'function') {
                            window.showInternTasksSection(taskId, card.board_id, card.enable_mis, card.is_admin);
                        }

                        // 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');

                            // Re-enable modal closing after loading completes
                            const bootstrapModal = bootstrap.Modal.getInstance(modalElement);
                            if (bootstrapModal) {
                                bootstrapModal._config.backdrop = true;
                                bootstrapModal._config.keyboard = true;
                            }

                            // Show close button again
                            const closeButton = modalElement.querySelector('.btn-close');
                            if (closeButton) {
                                closeButton.style.display = '';
                            }
                        }, 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');

                    // Re-enable modal closing even on error so user can close it
                    const bootstrapModal = bootstrap.Modal.getInstance(modalElement);
                    if (bootstrapModal) {
                        bootstrapModal._config.backdrop = true;
                        bootstrapModal._config.keyboard = true;
                    }

                    // Show close button again
                    const closeButton = modalElement.querySelector('.btn-close');
                    if (closeButton) {
                        closeButton.style.display = '';
                    }

                    // Show error message
                    document.getElementById('cardUser').textContent = 'Error loading data';
                    document.getElementById('cardTitle').value = 'Error loading card details';
                    document.getElementById('cardTitle').disabled = true;
                    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 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() {
                        saveDescription();
                    },
                    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');
            }
        };


        // Track description changes with immediate save (debounced)
        function saveDescription() {
            const newDesc = $(editorTextarea).summernote('code');
            const currentCardId = window.currentCardId;
            if (!currentCardId) return;

            // Clear existing timer
            if (saveTimers.description) {
                clearTimeout(saveTimers.description);
            }

            // Save with debouncing (longer delay for description as it's typically more content)
            saveTimers.description = setTimeout(() => {
                autoSaveCardChanges(currentCardId, 'description', newDesc, (success) => {});
            }, 1000);
        }
    }

    // Initialize view card member selection functionality
    function initializeViewMemberSelection() {
        // Initialize with AJAX pagination instead of static data
        let viewCardAvailableUsers = [];
        let viewCardSelectedMembers = [];
        let currentPage = 1;
        let hasMoreUsers = true;
        let isLoadingUsers = false;
        let currentSearchTerm = '';

        // Use current user ID from multiple possible sources:
        // 1. From global variable (set by API response)
        // 2. From Blade variable (set by controller)
        // 3. Default to null if neither is available
        const currentUserId = window.currentUserId ||
            (@json($current_user_id ?? null) ? parseInt(@json($current_user_id ?? null)) : null);

        // NEW: Get card creator user ID (passed from backend)
        let cardCreatorUserId = null;

        // Load users when dropdown is shown (Bootstrap event)
        const viewCardMembersDropdown = document.getElementById('viewCardMembersDropdownBtn');
        if (viewCardMembersDropdown) {
            viewCardMembersDropdown.addEventListener('shown.bs.dropdown', function() {
                // Load users with pagination when dropdown opens
                currentPage = 1;
                hasMoreUsers = true;
                viewCardAvailableUsers = [];
                loadViewCardAvailableUsers(true);
            });

            // Prevent dropdown from closing when clicking inside it
            const dropdownMenu = document.querySelector('#viewCardMembersDropdownBtn + .dropdown-menu');
            if (dropdownMenu) {
                dropdownMenu.addEventListener('click', function(e) {
                    e.stopPropagation();
                });
            }
        }

        // Load available users (board members only) with AJAX pagination
        function loadViewCardAvailableUsers(reset = false) {
            if (isLoadingUsers || (!hasMoreUsers && !reset)) return;

            isLoadingUsers = true;
            const container = document.getElementById('viewCardAvailableUsers');

            if (reset) {
                currentPage = 1;
                hasMoreUsers = true;
                viewCardAvailableUsers = [];
                container.innerHTML = '<p class="text-center py-2"><i class="fas fa-spinner fa-spin"></i> Memuat..</p>';
            } else {
                // Show loading indicator at bottom
                const loadingDiv = document.createElement('div');
                loadingDiv.className = 'text-center py-2';
                loadingDiv.id = 'loadingMoreViewCardUsers';
                loadingDiv.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Memuat lebih banyak..';
                container.appendChild(loadingDiv);
            }

            const apiUrl =
                `{{ url('/boards/board-members') }}?board_id=${BOARD_ID}&page=${currentPage}&per_page=20&search=${encodeURIComponent(currentSearchTerm)}`;

            fetch(apiUrl, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': CSRF_TOKEN,
                        'Accept': 'application/json',
                    },
                    credentials: 'same-origin'
                })
                .then(response => response.ok ? response.json() : Promise.reject(
                    `HTTP error! status: ${response.status}`))
                .then(data => {
                    if (data.success) {
                        const loadingIndicator = document.getElementById('loadingMoreViewCardUsers');
                        if (loadingIndicator) loadingIndicator.remove();

                        viewCardAvailableUsers = reset ? data.users : [...viewCardAvailableUsers, ...data.users];
                        hasMoreUsers = data.pagination.has_more;
                        renderViewCardAvailableUsers();
                    } else {
                        throw new Error(data.message || 'Gagal memuat anggota board');
                    }
                })
                .catch(error => {
                    console.error('Error loading board members:', error);
                    const errorMsg = typeof error === 'string' ? error : error.message;
                    container.innerHTML = `<p class="text-danger text-center py-2">${errorMsg}</p>`;
                })
                .finally(() => {
                    isLoadingUsers = false;
                });
        }

        // Render available users list (only show non-selected users)
        function renderViewCardAvailableUsers() {
            const container = document.getElementById('viewCardAvailableUsers');

            // Filter out already selected users
            const unselectedUsers = viewCardAvailableUsers.filter(user =>
                !viewCardSelectedMembers.some(member => member.id === user.id)
            );

            if (unselectedUsers.length === 0 && !hasMoreUsers) {
                container.innerHTML =
                    '<p class="dropdown-label text-muted text-center py-2">Tidak ada pengguna lain yang tersedia</p>';
                return;
            }

            const userItems = unselectedUsers.map(user => {
                return `
        <div class="user-item" data-user-id="${user.id}">
          <img src="${user.image}" alt="${user.name}" class="user-avatar">
          <div class="user-info flex-grow-1">
            <h6>${user.name}</h6>
            <small>${user.email}</small>
          </div>
        </div>
      `;
            }).join('');

            container.innerHTML = userItems;

            // Add "Load More" button if there are more users
            if (hasMoreUsers) {
                const loadMoreBtn = document.createElement('div');
                loadMoreBtn.className = 'text-center py-2';
                loadMoreBtn.innerHTML =
                    '<button type="button" class="btn btn-sm btn-outline-primary" id="loadMoreViewCardUsersBtn">Muat lebih banyak pengguna</button>';
                container.appendChild(loadMoreBtn);

                document.getElementById('loadMoreViewCardUsersBtn').addEventListener('click', function(e) {
                    e.stopPropagation();
                    currentPage++;
                    loadViewCardAvailableUsers(false);
                });
            }

            // Add click handlers
            container.querySelectorAll('.user-item').forEach(item => {
                item.addEventListener('click', function() {
                    const userId = parseInt(this.dataset.userId);
                    const user = viewCardAvailableUsers.find(u => u.id === userId);

                    if (user && !viewCardSelectedMembers.some(member => member.id === userId)) {
                        // Add to selected
                        viewCardSelectedMembers.push(user);
                        renderViewCardAvailableUsers();
                        renderViewCardSelectedMembers();
                        updateViewCardMemberHiddenInput();
                    }
                });
            });

            // Setup infinite scroll
            setupViewCardInfiniteScroll();
        }

        // Setup infinite scroll for the users container
        function setupViewCardInfiniteScroll() {
            const container = document.getElementById('viewCardAvailableUsers');

            container.removeEventListener('scroll', handleViewCardUserScroll);
            container.addEventListener('scroll', handleViewCardUserScroll);
        }

        function handleViewCardUserScroll(e) {
            const container = e.target;
            const scrollTop = container.scrollTop;
            const scrollHeight = container.scrollHeight;
            const clientHeight = container.clientHeight;

            // Check if scrolled near bottom (within 50px)
            if (scrollHeight - scrollTop - clientHeight < 50 && hasMoreUsers && !isLoadingUsers) {
                currentPage++;
                loadViewCardAvailableUsers(false);
            }
        }

        // Render selected members display
        function renderViewCardSelectedMembers() {
            const container = document.getElementById('viewCardMembersContainer');
            const boardMembersContainer = document.getElementById('viewCardBoardMembers');

            if (viewCardSelectedMembers.length === 0) {
                container.innerHTML = '';
                boardMembersContainer.innerHTML =
                    '<p class="dropdown-label text-center py-2 text-muted mb-0">Tidak ada anggota</p>';
                return;
            }

            // Dispose existing tooltips first to prevent duplication
            const existingTooltips = container.querySelectorAll('[data-bs-toggle="tooltip"]');
            existingTooltips.forEach(el => {
                const tooltip = bootstrap.Tooltip.getInstance(el);
                if (tooltip) tooltip.dispose();
            });

            // Update selected members display with hover functionality and tooltip
            const selectedItems = viewCardSelectedMembers.map(member => `
      <div class="selected-member-item" data-user-id="${member.id}" 
           data-bs-toggle="tooltip" 
           data-bs-placement="top" 
           data-bs-html="true"
           title="<div class='text-center'><strong>${member.name}</strong><br><small>${member.email || ''}</small></div>">
        <img src="${member.image}" alt="${member.name}" class="selected-member-avatar">
      </div>
    `).join('');

            container.innerHTML = selectedItems;

            // Initialize Bootstrap tooltips for member avatars
            const tooltipTriggerList = container.querySelectorAll('[data-bs-toggle="tooltip"]');
            tooltipTriggerList.forEach(tooltipTriggerEl => {
                new bootstrap.Tooltip(tooltipTriggerEl, {
                    html: true,
                    trigger: 'hover',
                    container: '#viewCardModal'
                });
            });

            // Update board members section in dropdown
            const boardMemberItems = viewCardSelectedMembers.map(member => {
                // NEW: Check if user can be removed (not current user AND not card creator)
                const canRemove = parseInt(member.id) !== currentUserId &&
                    (cardCreatorUserId === null || parseInt(member.id) !== cardCreatorUserId);

                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>
            ${parseInt(member.id) === cardCreatorUserId ? '<small class="text-muted">Pembuat Card</small>' : ''}
          </div>
          ${canRemove ? `<button type="button" class="remove-member-btn" data-user-id="${member.id}">×</button>` : ''}
        </div>
      `;
            }).join('');

            boardMembersContainer.innerHTML = boardMemberItems;

            boardMembersContainer.querySelectorAll('.remove-member-btn').forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const userId = parseInt(this.dataset.userId);
                    const memberToRemove = viewCardSelectedMembers.find(member => member.id === userId);
                    const memberName = memberToRemove ? memberToRemove.name : '';

                    const confirmRemove = () => {
                        // Dispose tooltips before removing member
                        const tooltips = container.querySelectorAll('[data-bs-toggle="tooltip"]');
                        tooltips.forEach(el => {
                            const tooltip = bootstrap.Tooltip.getInstance(el);
                            if (tooltip) tooltip.dispose();
                        });

                        const index = viewCardSelectedMembers.findIndex(member => member.id ===
                            userId);
                        if (index > -1) {
                            viewCardSelectedMembers.splice(index, 1);
                        }
                        renderViewCardAvailableUsers();
                        renderViewCardSelectedMembers();
                        updateViewCardMemberHiddenInput();
                    };

                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            title: 'Hapus Anggota?',
                            text: `Apakah Anda yakin ingin menghapus ${memberName} dari card ini?`,
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'Ya, hapus!',
                            cancelButtonText: 'Batal'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                confirmRemove();
                            }
                        });
                    } else if (confirm(
                            `Apakah Anda yakin ingin menghapus ${memberName} dari card ini?`)) {
                        confirmRemove();
                    }
                });
            });
        }

        // Update hidden input with selected member IDs
        function updateViewCardMemberHiddenInput() {
            const memberIds = viewCardSelectedMembers.map(member => member.id).join(',');
            document.getElementById('viewCardSelectedMemberIds').value = memberIds;

            // Trigger auto-save if we have a global auto-save function
            if (typeof window.autoSaveViewCardMembers === 'function') {
                window.autoSaveViewCardMembers(memberIds);
            }
        }

        // NEW: Function to set card creator when loading card data
        window.setCardCreatorUserId = function(creatorId) {
            cardCreatorUserId = creatorId ? parseInt(creatorId) : null;
            // Re-render to update remove buttons
            if (viewCardSelectedMembers.length > 0) {
                renderViewCardSelectedMembers();
            }
        };

        // Make the function globally accessible for auto-save
        window.updateViewCardMemberHiddenInput = updateViewCardMemberHiddenInput;
        window.viewCardSelectedMembers = viewCardSelectedMembers;
        window.renderViewCardSelectedMembers = renderViewCardSelectedMembers;

        // Search functionality with debounce (server-side search)
        let viewCardSearchTimeout;
        document.getElementById('viewCardMemberSearch').addEventListener('input', function(e) {
            const searchTerm = e.target.value.trim();

            // Clear previous timeout
            if (viewCardSearchTimeout) {
                clearTimeout(viewCardSearchTimeout);
            }

            // Debounce search by 300ms
            viewCardSearchTimeout = setTimeout(() => {
                currentSearchTerm = searchTerm;
                loadViewCardAvailableUsers(true);
            }, 300);
        });

        // Clear search when modal is closed
        document.getElementById('viewCardModal').addEventListener('hidden.bs.modal', function() {
            document.getElementById('viewCardMemberSearch').value = '';

            // Dispose all tooltips when modal is closed
            const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
            tooltips.forEach(el => {
                const tooltip = bootstrap.Tooltip.getInstance(el);
                if (tooltip) tooltip.dispose();
            });
        });
    }

    // Store attachments in an array
    let viewCardAttachments = [];

    // Handles attachment logic for view card
    function initializeViewAttachment() {
        // Prevent dropdown from closing on inner click
        const dropdownMenu = document.querySelector('#viewCardAttachmentsDropdownBtn + .dropdown-menu');

        if (dropdownMenu) {
            dropdownMenu.addEventListener('click', function(e) {
                e.stopPropagation();
            });
        }

        // Render attachments in the container
        function renderViewCardAttachments() {
            const attachmentsContainer = document.getElementById('viewAttachmentsContainer');

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

            let html = '';

            if (fileAttachments.length) {
                html += `<div class="mx-1"><h6 class="attachment-header">Files</h6></div>`;
                html += fileAttachments.map((att, idx) => {
                    const mainIdx = 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
                    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}" />
            `;
                    }
                    // 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" data-idx="${mainIdx}">
                ${ext}
              </div>
            `;
                    }

                    const canManageAttachments = window.currentCardCanManageAttachments || false;
                    const actionButtons = canManageAttachments ? `
            <div class="attachment-dropdown ms-auto">
              <button class="attachment-action-btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="fas fa-ellipsis-h"></i>
              </button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item text-danger remove-attachment" href="#" data-idx="${mainIdx}">Hapus</a></li>
              </ul>
            </div>
          ` : '';

                    return `
            <div class="attachment-text d-flex align-items-center mb-1 p-2 rounded">
              <span class="me-2">${previewHtml}</span> <small>${fileName}</small>
              ${actionButtons}
            </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 = viewCardAttachments.indexOf(att);
                    const linkUrl = att.path;
                    const displayText = att.displayText && att.displayText.trim() !== '' ? att.displayText : (
                        att.name || linkUrl);

                    const canManageAttachments = window.currentCardCanManageAttachments || false;
                    const actionButtons = canManageAttachments ? `
            <div class="attachment-dropdown ms-auto">
              <button class="attachment-action-btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="fas fa-ellipsis-h"></i>
              </button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item edit-attachment" href="#" data-idx="${mainIdx}">Ubah</a></li>
                <li><a class="dropdown-item text-danger remove-attachment" href="#" data-idx="${mainIdx}">Hapus</a></li>
              </ul>
            </div>
          ` : '';

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

            // Add remove event listeners - show confirmation dropdown
            attachmentsContainer.querySelectorAll('.remove-attachment').forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const idx = parseInt(this.getAttribute('data-idx'));

                    // Store index for confirmation
                    const confirmDropdown = document.getElementById(
                        'viewConfirmRemoveAttachmentDropdown');
                    confirmDropdown.setAttribute('data-remove-idx', idx);

                    // Position dropdown under the ellipsis button using Popper
                    const ellipsisBtn = this.closest('.attachment-dropdown').querySelector(
                        '.attachment-action-btn');

                    // Destroy any existing Popper instance
                    if (window.attachmentConfirmPopperInstance) {
                        window.attachmentConfirmPopperInstance.destroy();
                    }

                    // Create new Popper instance
                    window.attachmentConfirmPopperInstance = showConfirmationDropdown(ellipsisBtn,
                        confirmDropdown);
                });
            });

            // Add edit event listeners
            document.querySelectorAll('.edit-attachment').forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const idx = parseInt(this.getAttribute('data-idx'));
                    const att = viewCardAttachments[idx];

                    // Pre-fill fields
                    document.getElementById('viewEditCardLinkInput').value = att.link || att.path || '';
                    document.getElementById('viewEditDisplayInput').value = att.displayText || '';

                    // Store index for saving
                    document.getElementById('viewEditLinkDropdown').setAttribute('data-edit-idx', idx);

                    // Position dropdown under the ellipsis button using Popper
                    const dropdown = document.getElementById('viewEditLinkDropdown');
                    const ellipsisBtn = this.closest('.attachment-dropdown').querySelector(
                        '.attachment-action-btn');

                    // Destroy any existing Popper instance
                    if (window.editLinkPopperInstance) {
                        window.editLinkPopperInstance.destroy();
                    }

                    // Create new Popper instance
                    window.editLinkPopperInstance = showConfirmationDropdown(ellipsisBtn, dropdown);
                });
            });

            // Save edited link
            document.getElementById('viewSaveEditLinkBtn').addEventListener('click', function() {
                const dropdown = document.getElementById('viewEditLinkDropdown');
                const idx = parseInt(dropdown.getAttribute('data-edit-idx'));
                const link = document.getElementById('viewEditCardLinkInput').value.trim();
                const displayText = document.getElementById('viewEditDisplayInput').value.trim();
                const btnText = this.querySelector('.btn-text');
                const btnLoading = this.querySelector('.btn-loading');

                if (!link) {
                    showAlert('danger', `Please enter a link.`);
                    return;
                }

                const currentCardId = document.getElementById('viewCardModal').getAttribute('data-card-id');

                // Store old values for rollback if needed
                const oldLink = viewCardAttachments[idx].link;
                const oldDisplayText = viewCardAttachments[idx].displayText;

                // Update attachment
                viewCardAttachments[idx].link = link;
                viewCardAttachments[idx].displayText = displayText;
                viewCardAttachments[idx].path = link;
                viewCardAttachments[idx].name = displayText || link;

                // Show loading state
                btnText.classList.add('d-none');
                btnLoading.classList.remove('d-none');
                this.disabled = true;

                const updateUrl = '{{ url('/boards/update') }}';

                fetch(updateUrl, {
                        method: 'PUT',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': CSRF_TOKEN
                        },
                        body: JSON.stringify({
                            action: 'update_card',
                            card_id: currentCardId,
                            field: 'attachments',
                            value: viewCardAttachments
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        btnText.classList.remove('d-none');
                        btnLoading.classList.add('d-none');
                        this.disabled = false;

                        if (data.success) {
                            renderViewCardAttachments();
                            dropdown.style.display = 'none';

                            // Destroy Popper instance
                            if (window.editLinkPopperInstance) {
                                window.editLinkPopperInstance.destroy();
                                window.editLinkPopperInstance = null;
                            }

                            showAlert('success', 'Tautan berhasil diperbarui!');
                        } else {
                            viewCardAttachments[idx].link = oldLink;
                            viewCardAttachments[idx].displayText = oldDisplayText;
                            viewCardAttachments[idx].path = oldLink;
                            viewCardAttachments[idx].name = oldDisplayText || oldLink;
                            showAlert('danger',
                                `Gagal memperbarui tautan: ${data.message || 'Unknown error'}`);
                        }
                    })
                    .catch(error => {
                        btnText.classList.remove('d-none');
                        btnLoading.classList.add('d-none');
                        this.disabled = false;

                        // Rollback changes
                        viewCardAttachments[idx].link = oldLink;
                        viewCardAttachments[idx].displayText = oldDisplayText;
                        viewCardAttachments[idx].path = oldLink;
                        viewCardAttachments[idx].name = oldDisplayText || oldLink;

                        showAlert('danger', 'Error saat memperbarui tautan: ' + error.message);
                    });
            });

            // Cancel edit
            document.getElementById('viewCancelEditLinkBtn').addEventListener('click', function() {
                document.getElementById('viewEditLinkDropdown').style.display = 'none';

                // Destroy Popper instance
                if (window.editLinkPopperInstance) {
                    window.editLinkPopperInstance.destroy();
                    window.editLinkPopperInstance = null;
                }
            });

            // Confirm remove attachment
            document.getElementById('viewConfirmRemoveAttachmentBtn').addEventListener('click', function() {
                const confirmDropdown = document.getElementById('viewConfirmRemoveAttachmentDropdown');
                const idx = parseInt(confirmDropdown.getAttribute('data-remove-idx'));
                const btnText = this.querySelector('.btn-text');
                const btnLoading = this.querySelector('.btn-loading');
                const currentCardId = document.getElementById('viewCardModal').getAttribute('data-card-id');

                const attachment = viewCardAttachments[idx];

                // Show loading state
                btnText.classList.add('d-none');
                btnLoading.classList.remove('d-none');
                this.disabled = true;

                const updatedAttachments = viewCardAttachments.filter((_, i) => i !== idx);
                const updateUrl = '{{ url('/boards/update') }}';

                fetch(updateUrl, {
                        method: 'PUT',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': CSRF_TOKEN
                        },
                        body: JSON.stringify({
                            action: 'update_card',
                            card_id: currentCardId,
                            field: 'attachments',
                            value: updatedAttachments
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        btnText.classList.remove('d-none');
                        btnLoading.classList.add('d-none');
                        this.disabled = false;

                        if (data.success) {
                            // Rebuild from server response for guaranteed sync
                            if (data.attachments && Array.isArray(data.attachments)) {
                                viewCardAttachments = data.attachments.map(att => ({
                                    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
                                }));
                            } else {
                                viewCardAttachments.splice(idx, 1);
                            }
                            renderViewCardAttachments();
                            confirmDropdown.style.display = 'none';

                            // Destroy Popper instance
                            if (window.attachmentConfirmPopperInstance) {
                                window.attachmentConfirmPopperInstance.destroy();
                                window.attachmentConfirmPopperInstance = null;
                            }

                            if (window.updateCardAttachmentCount && currentCardId) {
                                window.updateCardAttachmentCount(currentCardId, viewCardAttachments.length);
                            }

                            showAlert('success', 'Lampiran berhasil dihapus!');
                        } else {
                            showAlert('danger',
                                `Gagal menghapus lampiran: ${data.message || 'Unknown error'}`);
                        }
                    })
                    .catch(error => {
                        btnText.classList.remove('d-none');
                        btnLoading.classList.add('d-none');
                        this.disabled = false;
                        showAlert('danger', `Error saat menghapus lampiran: ${error.message}`);
                    });
            });

            // Cancel remove attachment
            document.getElementById('viewCancelRemoveAttachmentBtn').addEventListener('click', function() {
                document.getElementById('viewConfirmRemoveAttachmentDropdown').style.display = 'none';

                // Destroy Popper instance
                if (window.attachmentConfirmPopperInstance) {
                    window.attachmentConfirmPopperInstance.destroy();
                    window.attachmentConfirmPopperInstance = null;
                }
            });

            // Close edit dropdown when clicking outside
            document.addEventListener('click', function(e) {
                const dropdown = document.getElementById('viewEditLinkDropdown');
                const confirmDropdown = document.getElementById('viewConfirmRemoveAttachmentDropdown');

                if (dropdown.style.display === 'block' && !dropdown.contains(e.target) && !e.target.classList
                    .contains('edit-attachment')) {
                    dropdown.style.display = 'none';

                    // Destroy Popper instance
                    if (window.editLinkPopperInstance) {
                        window.editLinkPopperInstance.destroy();
                        window.editLinkPopperInstance = null;
                    }
                }

                if (confirmDropdown.style.display === 'block' && !confirmDropdown.contains(e.target) && !e
                    .target.classList
                    .contains('remove-attachment')) {
                    confirmDropdown.style.display = 'none';

                    // Destroy Popper instance
                    if (window.attachmentConfirmPopperInstance) {
                        window.attachmentConfirmPopperInstance.destroy();
                        window.attachmentConfirmPopperInstance = null;
                    }
                }
            });

            // Preview modal for any file type
            attachmentsContainer.querySelectorAll('.attachment-img-thumb, .attachment-file-thumb').forEach(el => {
                el.addEventListener('click', function(e) {
                    const idx = this.getAttribute('data-idx');
                    const att = viewCardAttachments[idx];
                    const file = att.file;
                    const fileName = att.displayText || att.name || (file ? file.name : '');
                    const createdAtValue = att.createdAt || att.created_at;

                    // Format meta info like Trello
                    let metaInfo = '';
                    if (createdAtValue) {
                        const date = new Date(createdAtValue);
                        const options = {
                            month: 'short',
                            day: 'numeric',
                            year: 'numeric',
                            hour: 'numeric',
                            minute: '2-digit',
                            hour12: true
                        };
                        metaInfo = 'Added ' + date.toLocaleDateString('en-US', options);
                    }

                    // Calculate file size if available
                    if (att.size) {
                        const sizeKB = (att.size / 1024).toFixed(2);
                        const sizeMB = (att.size / (1024 * 1024)).toFixed(2);
                        const sizeStr = sizeMB >= 1 ? `${sizeMB} MB` : `${sizeKB} KB`;
                        metaInfo += metaInfo ? ` • ${sizeStr}` : sizeStr;
                    }

                    // Hide all preview elements
                    document.getElementById('previewModalImg').classList.add('d-none');
                    document.getElementById('previewModalPdf').classList.add('d-none');
                    document.getElementById('previewModalText').classList.add('d-none');
                    document.getElementById('previewModalGeneric').classList.add('d-none');

                    // Server-side image
                    if (att.type && att.type.startsWith('image/') && att.path) {
                        // Set preview data for zoom and download functionality
                        if (typeof window.setPreviewData === 'function') {
                            window.setPreviewData(att.path, fileName, metaInfo);
                        }
                        document.getElementById('previewModalImg').src = att.path;
                        document.getElementById('previewModalImg').classList.remove('d-none');
                    }
                    // Server-side PDF
                    else if (att.type === 'application/pdf' && att.path) {
                        // Set preview data for download functionality
                        if (typeof window.setPreviewData === 'function') {
                            window.setPreviewData(att.path, fileName, metaInfo);
                        }
                        document.getElementById('previewModalPdf').src = att.path;
                        document.getElementById('previewModalPdf').classList.remove('d-none');
                    }
                    // Server-side text file
                    else if (att.type && att.type.startsWith('text/') && att.path) {
                        if (typeof window.setPreviewData === 'function') {
                            window.setPreviewData(att.path, fileName, metaInfo);
                        }
                        fetch(att.path)
                            .then(response => response.text())
                            .then(text => {
                                document.getElementById('previewModalText').textContent = text;
                                document.getElementById('previewModalText').classList.remove(
                                    'd-none');
                            });
                    }
                    // Generic file: show icon and filename
                    else {
                        if (typeof window.setPreviewData === 'function') {
                            window.setPreviewData(att.path || '', fileName, metaInfo);
                        }
                        document.getElementById('previewModalGeneric').innerHTML = `
              <i class="fas fa-file fa-4x mb-3"></i>
              <div>Preview tidak tersedia untuk tipe file ini!</div>
              ${att.path ? `<a href="${att.path}" download="${fileName}" class="btn btn-sm btn-outline-light mt-3"><i class="fas fa-download me-1"></i> Download</a>` : ''}
            `;
                        document.getElementById('previewModalGeneric').classList.remove('d-none');
                    }

                    const modal = new bootstrap.Modal(document.getElementById('previewModal'));
                    modal.show();
                });
            });
        }

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

        // Custom file button logic
        const customChooseFileBtn = document.getElementById('viewCustomChooseFileBtn');
        const customCardAttachmentInput = document.getElementById('viewCustomCardAttachmentInput');
        const dropdownInstance = bootstrap.Dropdown.getOrCreateInstance(document.getElementById(
            'viewCardAttachmentsDropdownBtn'));

        customChooseFileBtn.addEventListener('click', function() {
            customCardAttachmentInput.click();
        });

        // Update the file upload handler - now supports multiple files
        customCardAttachmentInput.addEventListener('change', function(e) {
            const files = Array.from(e.target.files);
            if (!files || files.length === 0) return;

            const currentCardId = document.getElementById('viewCardModal').getAttribute('data-card-id');
            const btnText = customChooseFileBtn.querySelector('.btn-text');
            const btnLoading = customChooseFileBtn.querySelector('.btn-loading');

            // Validate card ID exists
            if (!currentCardId) {
                showAlert('danger', `Error: ID Kartu tidak ditemukan. Silakan tutup dan buka kembali kartu.`);
                e.target.value = '';
                return;
            }

            // Validate file count (max 5 files at once)
            const MAX_FILES = 5;
            if (files.length > MAX_FILES) {
                showAlert('danger', `Anda hanya dapat mengunggah hingga ${MAX_FILES} file sekaligus.`);
                e.target.value = '';
                return;
            }

            // Validate individual file sizes (10MB each)
            const MAX_SIZE = 10 * 1024 * 1024; // 10MB in bytes
            const oversizedFiles = files.filter(file => file.size > MAX_SIZE);
            if (oversizedFiles.length > 0) {
                showAlert('danger',
                    `Beberapa file melebihi batas 10MB: ${oversizedFiles.map(f => f.name).join(', ')}`);
                e.target.value = '';
                return;
            }

            // Show loading state
            btnText.classList.add('d-none');
            btnLoading.classList.remove('d-none');
            customChooseFileBtn.disabled = true;

            // Upload files one by one and track results
            let uploadedCount = 0;
            let failedCount = 0;
            let duplicateCount = 0;
            const failedFiles = [];

            const uploadUrl = '{{ url('/boards/upload-attachment') }}';

            const uploadFile = (file, index) => {
                return new Promise((resolve) => {
                    const formData = new FormData();
                    formData.append('attachment', file);
                    formData.append('card_id', currentCardId);

                    fetch(uploadUrl, {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': CSRF_TOKEN
                            },
                            body: formData
                        })
                        .then(response => response.json().then(data => ({
                            ok: response.ok,
                            status: response.status,
                            data: data
                        })))
                        .then(result => {
                            if (result.ok && result.data.success && result.data.attachment) {
                                const newAttachment = {
                                    id: result.data.attachment.id,
                                    path: result.data.attachment.path,
                                    name: result.data.attachment.name,
                                    type: result.data.attachment.type ||
                                        'application/octet-stream',
                                    displayText: result.data.attachment.name,
                                    createdAt: result.data.attachment.created_at ||
                                        new Date()
                                };

                                viewCardAttachments.push(newAttachment);
                                uploadedCount++;
                                resolve({
                                    success: true,
                                    file: file.name
                                });
                            } else {
                                const message = result.data.message || 'Unknown error';
                                const isDuplicate = result.data.duplicate || message
                                    .toLowerCase().includes(
                                        'File dengan nama ini sudah ada di kartu ini');

                                if (isDuplicate) {
                                    duplicateCount++;
                                    resolve({
                                        success: false,
                                        file: file.name,
                                        reason: 'duplicate'
                                    });
                                } else {
                                    failedCount++;
                                    failedFiles.push(file.name);
                                    resolve({
                                        success: false,
                                        file: file.name,
                                        reason: message
                                    });
                                }
                            }
                        })
                        .catch(error => {
                            failedCount++;
                            failedFiles.push(file.name);
                            resolve({
                                success: false,
                                file: file.name,
                                reason: error.message
                            });
                        });
                });
            };

            // Upload all files sequentially
            Promise.all(files.map((file, index) => uploadFile(file, index)))
                .then(results => {
                    // Hide loading state
                    btnText.classList.remove('d-none');
                    btnLoading.classList.add('d-none');
                    customChooseFileBtn.disabled = false;

                    // Re-render attachments to show newly uploaded files
                    if (uploadedCount > 0) {
                        renderViewCardAttachments();

                        if (window.updateCardAttachmentCount) {
                            window.updateCardAttachmentCount(currentCardId, viewCardAttachments.length);
                        }
                    }

                    // Show summary message
                    let messages = [];
                    if (uploadedCount > 0) {
                        messages.push(
                            `${uploadedCount} file${uploadedCount > 1 ? 's' : ''} berhasil di unggah!`);
                    }
                    if (duplicateCount > 0) {
                        messages.push(
                            `${duplicateCount} duplicate${duplicateCount > 1 ? 's' : ''} dilewati.`);
                    }
                    if (failedCount > 0) {
                        messages.push(
                            `${failedCount} file${failedCount > 1 ? 's' : ''} gagal: ${failedFiles.join(', ')}`
                        );
                    }

                    if (uploadedCount > 0 && failedCount === 0 && duplicateCount === 0) {
                        showAlert('success', messages[0]);
                        // Close the dropdown after successful upload
                        dropdownInstance.hide();
                    } else if (uploadedCount > 0) {
                        showAlert('warning', messages.join('. '));
                    } else {
                        showAlert('danger', messages.join('. '));
                    }
                });

            e.target.value = '';
        });

        // Handle Insert button click
        const insertBtn = document.getElementById('viewInsertAttachmentBtn');
        insertBtn.addEventListener('click', function() {
            const linkInput = document.getElementById('viewCardLinkInput');
            const displayInput = document.getElementById('viewDisplayInput');
            const dropdownInstance = bootstrap.Dropdown.getOrCreateInstance(document.getElementById(
                'viewCardAttachmentsDropdownBtn'));
            const btnText = this.querySelector('.btn-text');
            const btnLoading = this.querySelector('.btn-loading');

            const link = linkInput.value.trim();
            const displayText = displayInput.value.trim();
            const currentCardId = document.getElementById('viewCardModal').getAttribute('data-card-id');

            if (!link) {
                showAlert('danger', `Masukkan tautan.`);
                return;
            }

            // Show loading state
            btnText.classList.add('d-none');
            btnLoading.classList.remove('d-none');
            this.disabled = true;

            // Prepare the new link object
            const newLink = {
                type: 'link',
                link: link,
                path: link,
                displayText: displayText || link,
                name: displayText || link
            };

            // Temporarily add to array for sending to backend
            viewCardAttachments.push(newLink);

            const updateUrl = '{{ url('/boards/update') }}';

            fetch(updateUrl, {
                    method: 'PUT',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': CSRF_TOKEN
                    },
                    body: JSON.stringify({
                        action: 'update_card',
                        card_id: currentCardId,
                        field: 'attachments',
                        value: viewCardAttachments
                    })
                })
                .then(response => response.json())
                .then(data => {
                    btnText.classList.remove('d-none');
                    btnLoading.classList.add('d-none');
                    this.disabled = false;

                    if (data.success) {
                        if (data.attachment?.id) {
                            const lastLink = viewCardAttachments[viewCardAttachments.length - 1];
                            lastLink.id = data.attachment.id;
                        }

                        renderViewCardAttachments();
                        dropdownInstance.hide();

                        if (window.updateCardAttachmentCount && currentCardId) {
                            window.updateCardAttachmentCount(currentCardId, viewCardAttachments.length);
                        }

                        linkInput.value = '';
                        displayInput.value = '';
                        showAlert('success', 'Tautan berhasil ditambahkan!');
                    } else if (data.duplicate || data.message?.toLowerCase().includes(
                            'Tautan sudah ada pada kartu ini')) {
                        showAlert('danger', 'Tautan sudah ada pada kartu ini.');
                        viewCardAttachments.pop();
                    } else {
                        showAlert('danger', `Gagal menambahkan tautan: ${data.message || 'Unknown error'}`);
                        viewCardAttachments.pop();
                    }
                })
                .catch(error => {
                    btnText.classList.remove('d-none');
                    btnLoading.classList.add('d-none');
                    this.disabled = false;
                    showAlert('danger', `Error saat menambahkan tautan: ${error.message}`);
                    viewCardAttachments.pop();
                });
        });

        // Reset attachments when modal closes
        document.getElementById('viewCardModal').addEventListener('hidden.bs.modal', function() {
            viewCardAttachments = [];
            renderViewCardAttachments();
        });

        // Initial render
        renderViewCardAttachments();
    }

    let viewCardCustomFields = [];

    // Handles custom fields logic for view card
    function initializeViewCustomField() {
        // Prevent dropdown from closing when clicking inside it
        const dropdownMenu = document.querySelector('#viewCustomFieldDropdownBtn + .dropdown-menu');
        if (dropdownMenu) {
            dropdownMenu.addEventListener('click', function(e) {
                e.stopPropagation();
            });
        }

        // Render custom fields in the container
        function renderViewCardCustomFields() {
            const fieldsContainer = document.getElementById('viewCustomFieldsContainer');

            if (!viewCardCustomFields || viewCardCustomFields.length === 0) {
                fieldsContainer.innerHTML = '';
                return;
            }

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

                return `
          <div class="custom-field-item d-flex align-items-center mb-2 p-2 rounded">
            <div class="flex-grow-1">
              <div class="d-flex align-items-center mb-1">
                <h6 class="custom-field-header fw-bold me-2">${field.name}</h6>
              </div>
              <div class="custom-field-value">
                ${renderFieldInput(field, idx)}
              </div>
            </div>
            <div class="custom-field-dropdown ms-2">
              <button class="custom-field-action-btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="fas fa-ellipsis-h"></i>
              </button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item edit-custom-field" href="#" data-idx="${idx}">Ubah</a></li>
                <li><a class="dropdown-item text-danger remove-custom-field" href="#" data-idx="${idx}">Hapus</a></li>
              </ul>
            </div>
          </div>
        `;
            }).join('');

            fieldsContainer.innerHTML = html;

            // Add event listeners for field inputs
            attachFieldInputListeners();

            // Add remove event listeners
            fieldsContainer.querySelectorAll('.remove-custom-field').forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const idx = parseInt(this.getAttribute('data-idx'));
                    const field = viewCardCustomFields[idx];

                    // Position confirmation dropdown under the ellipsis button using Popper
                    const dropdown = document.getElementById('viewConfirmRemoveCustomFieldDropdown');
                    const ellipsisBtn = this.closest('.custom-field-dropdown').querySelector(
                        '.custom-field-action-btn');

                    // Destroy any existing Popper instance
                    if (window.customFieldConfirmPopperInstance) {
                        window.customFieldConfirmPopperInstance.destroy();
                    }

                    // Create new Popper instance
                    window.customFieldConfirmPopperInstance = showConfirmationDropdown(ellipsisBtn,
                        dropdown);

                    // Reset button state
                    const confirmBtn = document.getElementById('viewConfirmRemoveCustomFieldBtn');
                    const btnText = confirmBtn.querySelector('.btn-text');
                    const btnLoading = confirmBtn.querySelector('.btn-loading');
                    btnText.classList.remove('d-none');
                    btnLoading.classList.add('d-none');
                    confirmBtn.disabled = false;

                    // Remove any existing click listeners by cloning
                    const newConfirmBtn = confirmBtn.cloneNode(true);
                    confirmBtn.parentNode.replaceChild(newConfirmBtn, confirmBtn);

                    // Add click listener to confirm button
                    document.getElementById('viewConfirmRemoveCustomFieldBtn').addEventListener('click',
                        function() {
                            const btnText = this.querySelector('.btn-text');
                            const btnLoading = this.querySelector('.btn-loading');

                            // Show loading state
                            btnText.classList.add('d-none');
                            btnLoading.classList.remove('d-none');
                            this.disabled = true;

                            if (field.id) {
                                const deleteUrl = `{{ url('/cards/custom-fields') }}/${field.id}`;

                                fetch(deleteUrl, {
                                        method: 'DELETE',
                                        headers: {
                                            'X-Requested-With': 'XMLHttpRequest',
                                            'Content-Type': 'application/json',
                                            'X-CSRF-TOKEN': CSRF_TOKEN
                                        }
                                    })
                                    .then(response => response.json())
                                    .then(data => {
                                        btnText.classList.remove('d-none');
                                        btnLoading.classList.add('d-none');
                                        this.disabled = false;
                                        dropdown.style.display = 'none';

                                        if (data.success) {
                                            viewCardCustomFields.splice(idx, 1);
                                            renderViewCardCustomFields();
                                            showAlert('success',
                                                'Field kustom berhasil dihapus!');
                                        } else {
                                            showAlert('danger',
                                                `Gagal menghapus field kustom: ${data.message || 'Unknown error'}`
                                            );
                                        }
                                    })
                                    .catch(error => {
                                        btnText.classList.remove('d-none');
                                        btnLoading.classList.add('d-none');
                                        this.disabled = false;
                                        dropdown.style.display = 'none';
                                        showAlert('danger',
                                            `Error saat menghapus field kustom: ${error.message}`
                                        );
                                    });
                            } else {
                                viewCardCustomFields.splice(idx, 1);
                                renderViewCardCustomFields();
                                btnText.classList.remove('d-none');
                                btnLoading.classList.add('d-none');
                                this.disabled = false;
                                dropdown.style.display = 'none';

                                // Destroy Popper instance
                                if (window.customFieldConfirmPopperInstance) {
                                    window.customFieldConfirmPopperInstance.destroy();
                                    window.customFieldConfirmPopperInstance = null;
                                }
                            }
                        });
                });
            });

            // Add edit event listeners
            fieldsContainer.querySelectorAll('.edit-custom-field').forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const idx = parseInt(this.getAttribute('data-idx'));
                    const field = viewCardCustomFields[idx];

                    // Pre-fill fields
                    document.getElementById('viewEditCustomFieldName').value = field.name || '';
                    document.getElementById('viewEditCustomFieldType').value = field.type || '';

                    // Store index for saving
                    document.getElementById('viewEditCustomFieldDropdown').setAttribute('data-edit-idx',
                        idx);

                    // Position dropdown under the ellipsis button using Popper
                    const dropdown = document.getElementById('viewEditCustomFieldDropdown');
                    const ellipsisBtn = this.closest('.custom-field-dropdown').querySelector(
                        '.custom-field-action-btn');

                    // Destroy any existing Popper instance
                    if (window.editCustomFieldPopperInstance) {
                        window.editCustomFieldPopperInstance.destroy();
                    }

                    // Create new Popper instance
                    window.editCustomFieldPopperInstance = showConfirmationDropdown(ellipsisBtn,
                        dropdown);
                });
            });
        }

        // Render field input based on type
        function renderFieldInput(field, idx) {
            const value = field.value || '';

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

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

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

                default:
                    return '';
            }
        }

        // Attach listeners to field inputs for immediate save
        function attachFieldInputListeners() {
            document.querySelectorAll('.custom-field-input').forEach(input => {
                input.addEventListener('change', function(e) {
                    const idx = parseInt(this.getAttribute('data-idx'));
                    if (viewCardCustomFields[idx]) {
                        const newValue = this.value;
                        viewCardCustomFields[idx].value = newValue;

                        // Save immediately when custom field value changes
                        if (viewCardCustomFields[idx].id && typeof window
                            .autoSaveViewCardCustomFields === 'function') {
                            window.autoSaveViewCardCustomFields(viewCardCustomFields[idx].id, {
                                value: newValue
                            }, (success) => {
                                if (!success) {
                                    console.error('Failed to save custom field value');
                                }
                            });
                        }
                    }
                });
            });
        }

        // 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;

        // Get dropdown instance
        const dropdownInstance = bootstrap.Dropdown.getOrCreateInstance(
            document.getElementById('viewCustomFieldDropdownBtn')
        );

        // Handle Create button click
        const createBtn = document.getElementById('viewCreateCustomField');
        createBtn.addEventListener('click', function() {
            const nameInput = document.getElementById('viewCustomFieldName');
            const typeSelect = document.getElementById('viewCustomFieldType');
            const btnText = this.querySelector('.btn-text');
            const btnLoading = this.querySelector('.btn-loading');

            const name = nameInput.value.trim();
            const type = typeSelect.value;

            // Validation
            if (!name) {
                showAlert('danger', 'Masukkan nama field.');
                return;
            }

            if (!type) {
                showAlert('danger', 'Pilih tipe field.');
                return;
            }

            // Check for duplicate field names
            if (viewCardCustomFields.some(field => field.name.toLowerCase() === name.toLowerCase())) {
                showAlert('danger', 'Field dengan nama ini sudah ada.');
                return;
            }

            const currentCardId = document.getElementById('viewCardModal').getAttribute('data-card-id');
            const createFieldUrl = '{{ url('/cards/custom-fields') }}';

            btnText.classList.add('d-none');
            btnLoading.classList.remove('d-none');
            this.disabled = true;

            fetch(createFieldUrl, {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': CSRF_TOKEN
                    },
                    body: JSON.stringify({
                        card_id: currentCardId,
                        name: name,
                        type: type,
                        value: getDefaultValue(type)
                    })
                })
                .then(response => response.json())
                .then(data => {
                    btnText.classList.remove('d-none');
                    btnLoading.classList.add('d-none');
                    this.disabled = false;

                    if (data.success) {
                        const newField = {
                            id: data.custom_field.id,
                            name: name,
                            type: type,
                            value: getDefaultValue(type),
                            createdAt: new Date()
                        };
                        viewCardCustomFields.push(newField);
                        renderViewCardCustomFields();
                        dropdownInstance.hide();

                        nameInput.value = '';
                        typeSelect.value = '';
                        showAlert('success', 'Kolom custom berhasil ditambahkan');
                    } else {
                        showAlert('danger',
                            `Gagal menambahkan kolom kustom: ${data.message || 'Unknown error'}`);
                    }
                })
                .catch(error => {
                    btnText.classList.remove('d-none');
                    btnLoading.classList.add('d-none');
                    this.disabled = false;
                    showAlert('danger', `Error saat menambahkan kolom kustom: ${error.message}`);
                });
        });

        // Get default value based on field type
        function getDefaultValue(type) {
            switch (type) {
                case 'text':
                    return '';
                case 'number':
                    return '';
                case 'date':
                    return '';
                default:
                    return '';
            }
        }

        window.autoSaveViewCardCustomFields = function(fieldId = null, updateData = null, callback = null) {
            const currentCardId = document.getElementById('viewCardModal').getAttribute('data-card-id');

            if (fieldId && updateData) {
                const updateUrl = `{{ url('/cards/custom-fields') }}/${fieldId}`;

                fetch(updateUrl, {
                        method: 'PUT',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': CSRF_TOKEN
                        },
                        body: JSON.stringify(updateData)
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (!data.success) {
                            showAlert('danger',
                                `Gagal memperbarui kolom kustom: ${data.message || 'Unknown error'}`);
                        }
                        if (callback) callback(data.success);
                    })
                    .catch(error => {
                        showAlert('danger', `Error saat memperbarui kolom kustom: ${error.message}`);
                        if (callback) callback(false);
                    });
            }
        };

        // Save edited field
        document.getElementById('viewSaveEditCustomFieldBtn')?.addEventListener('click', function() {
            const dropdown = document.getElementById('viewEditCustomFieldDropdown');
            const idx = parseInt(dropdown.getAttribute('data-edit-idx'));
            const name = document.getElementById('viewEditCustomFieldName').value.trim();
            const type = document.getElementById('viewEditCustomFieldType').value;
            const btnText = this.querySelector('.btn-text');
            const btnLoading = this.querySelector('.btn-loading');

            if (!name) {
                showAlert('danger', 'Masukkan nama field.');
                return;
            }

            if (!type) {
                showAlert('danger', 'Pilih tipe field.');
                return;
            }

            // Check for duplicate names (excluding current field)
            const duplicateExists = viewCardCustomFields.some((field, i) =>
                i !== idx && field.name.toLowerCase() === name.toLowerCase()
            );

            if (duplicateExists) {
                showAlert('danger', 'Field dengan nama ini sudah ada.');
                return;
            }

            const field = viewCardCustomFields[idx];
            const typeChanged = field.type !== type;

            // Store old values for rollback if needed
            const oldName = field.name;
            const oldType = field.type;
            const oldValue = field.value;

            // Prepare update data
            const updateData = {
                name: name
            };

            // If type changed, reset value
            if (typeChanged) {
                updateData.type = type;
            }

            btnText.classList.add('d-none');
            btnLoading.classList.remove('d-none');
            this.disabled = true;

            if (field.id) {
                const updateFieldUrl = `{{ url('/cards/custom-fields') }}/${field.id}`;

                fetch(updateFieldUrl, {
                        method: 'PUT',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': CSRF_TOKEN
                        },
                        body: JSON.stringify(updateData)
                    })
                    .then(response => response.json())
                    .then(data => {
                        btnText.classList.remove('d-none');
                        btnLoading.classList.add('d-none');
                        this.disabled = false;

                        if (data.success) {
                            field.name = name;
                            if (typeChanged) {
                                field.type = type;
                                field.value = getDefaultValue(type);
                            }

                            renderViewCardCustomFields();
                            dropdown.style.display = 'none';

                            // Destroy Popper instance
                            if (window.editCustomFieldPopperInstance) {
                                window.editCustomFieldPopperInstance.destroy();
                                window.editCustomFieldPopperInstance = null;
                            }

                            showAlert('success', 'Field kustom berhasil diperbarui!');
                        } else {
                            showAlert('danger',
                                `Gagal memperbarui field kustom: ${data.message || 'Unknown error'}`);
                        }
                    })
                    .catch(error => {
                        btnText.classList.remove('d-none');
                        btnLoading.classList.add('d-none');
                        this.disabled = false;
                        showAlert('danger', `Error saat memperbarui field kustom: ${error.message}`);
                    });
            }
        });

        // Cancel edit
        document.getElementById('viewCancelEditCustomFieldBtn')?.addEventListener('click', function() {
            document.getElementById('viewEditCustomFieldDropdown').style.display = 'none';

            // Destroy Popper instance
            if (window.editCustomFieldPopperInstance) {
                window.editCustomFieldPopperInstance.destroy();
                window.editCustomFieldPopperInstance = null;
            }
        });

        // Cancel remove confirmation
        document.getElementById('viewCancelRemoveCustomFieldBtn')?.addEventListener('click', function() {
            document.getElementById('viewConfirmRemoveCustomFieldDropdown').style.display = 'none';

            // Destroy Popper instance
            if (window.customFieldConfirmPopperInstance) {
                window.customFieldConfirmPopperInstance.destroy();
                window.customFieldConfirmPopperInstance = null;
            }
        });

        // Close edit dropdown when clicking outside
        document.addEventListener('click', function(e) {
            const editDropdown = document.getElementById('viewEditCustomFieldDropdown');
            const confirmDropdown = document.getElementById('viewConfirmRemoveCustomFieldDropdown');

            // Close edit dropdown
            if (editDropdown && editDropdown.style.display === 'block' &&
                !editDropdown.contains(e.target) &&
                !e.target.classList.contains('edit-custom-field')) {
                editDropdown.style.display = 'none';

                // Destroy Popper instance
                if (window.editCustomFieldPopperInstance) {
                    window.editCustomFieldPopperInstance.destroy();
                    window.editCustomFieldPopperInstance = null;
                }
            }

            // Close confirm dropdown
            if (confirmDropdown && confirmDropdown.style.display === 'block' &&
                !confirmDropdown.contains(e.target) &&
                !e.target.classList.contains('remove-custom-field')) {
                confirmDropdown.style.display = 'none';

                // Destroy Popper instance
                if (window.customFieldConfirmPopperInstance) {
                    window.customFieldConfirmPopperInstance.destroy();
                    window.customFieldConfirmPopperInstance = null;
                }
            }
        });

        // Reset custom fields when modal closes
        document.getElementById('viewCardModal').addEventListener('hidden.bs.modal', function() {
            viewCardCustomFields = [];
            renderViewCardCustomFields();
        });

        // Initial render
        renderViewCardCustomFields();

        // Initialize field name autocomplete
        initializeFieldNameAutocomplete();
    }

    // Field Name Autocomplete for Custom Fields
    function initializeFieldNameAutocomplete() {
        const addNameInput = document.getElementById('viewCustomFieldName');
        const editNameInput = document.getElementById('viewEditCustomFieldName');
        const addSuggestionsContainer = document.getElementById('fieldNameSuggestions');
        const editSuggestionsContainer = document.getElementById('editFieldNameSuggestions');

        let currentSuggestions = [];
        let selectedIndex = -1;
        let debounceTimer = null;

        // Setup autocomplete for add field input
        if (addNameInput && addSuggestionsContainer) {
            setupAutocomplete(addNameInput, addSuggestionsContainer);
        }

        // Setup autocomplete for edit field input
        if (editNameInput && editSuggestionsContainer) {
            setupAutocomplete(editNameInput, editSuggestionsContainer);
        }

        function setupAutocomplete(input, suggestionsContainer) {
            // Input event - fetch suggestions
            input.addEventListener('input', function() {
                const query = this.value.trim();
                selectedIndex = -1;

                clearTimeout(debounceTimer);

                if (query.length === 0) {
                    // Show all suggestions when input is empty but focused
                    fetchSuggestions('', input, suggestionsContainer);
                    return;
                }

                // Debounce for typing
                debounceTimer = setTimeout(() => {
                    fetchSuggestions(query, input, suggestionsContainer);
                }, 150);
            });

            // Focus event - show suggestions
            input.addEventListener('focus', function() {
                const query = this.value.trim();
                fetchSuggestions(query, input, suggestionsContainer);
            });

            // Keyboard navigation
            input.addEventListener('keydown', function(e) {
                const items = suggestionsContainer.querySelectorAll('.field-name-suggestion-item');

                if (items.length === 0) return;

                if (e.key === 'ArrowDown') {
                    e.preventDefault();
                    selectedIndex = Math.min(selectedIndex + 1, items.length - 1);
                    updateSelectedItem(items);
                } else if (e.key === 'ArrowUp') {
                    e.preventDefault();
                    selectedIndex = Math.max(selectedIndex - 1, 0);
                    updateSelectedItem(items);
                } else if (e.key === 'Enter') {
                    if (selectedIndex >= 0 && items[selectedIndex]) {
                        e.preventDefault();
                        const selectedText = items[selectedIndex].getAttribute('data-name');
                        input.value = selectedText;
                        hideSuggestions(suggestionsContainer);
                    }
                } else if (e.key === 'Escape') {
                    hideSuggestions(suggestionsContainer);
                }
            });

            // Click outside to close
            document.addEventListener('click', function(e) {
                if (!input.contains(e.target) && !suggestionsContainer.contains(e.target)) {
                    hideSuggestions(suggestionsContainer);
                }
            });
        }

        function fetchSuggestions(query, input, suggestionsContainer) {
            const url = `{{ url('/cards/custom-fields/suggestions') }}?query=${encodeURIComponent(query)}`;

            fetch(url, {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success && data.suggestions && data.suggestions.length > 0) {
                        currentSuggestions = data.suggestions;
                        renderSuggestions(input, suggestionsContainer, data.suggestions);
                    } else {
                        if (query.length > 0) {
                            showNoResults(suggestionsContainer);
                        } else {
                            hideSuggestions(suggestionsContainer);
                        }
                    }
                })
                .catch(error => {
                    console.error('Error fetching suggestions:', error);
                    hideSuggestions(suggestionsContainer);
                });
        }

        function renderSuggestions(input, suggestionsContainer, suggestions) {
            let html = suggestions.map((item, index) => `
                <div class="field-name-suggestion-item" data-index="${index}" data-name="${escapeHtml(item.name)}">
                    <span class="suggestion-text">${highlightMatch(item.name, input.value)}</span>
                    <!-- <span class="suggestion-count">digunakan ${item.count}x</span> -->
                </div>
            `).join('');

            suggestionsContainer.innerHTML = html;
            suggestionsContainer.classList.remove('d-none');
            selectedIndex = -1;

            // Add click handlers
            suggestionsContainer.querySelectorAll('.field-name-suggestion-item').forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    const name = this.getAttribute('data-name');
                    input.value = name;
                    hideSuggestions(suggestionsContainer);
                    input.focus();
                });
            });
        }

        function showNoResults(suggestionsContainer) {
            suggestionsContainer.innerHTML = '<div class="field-name-no-results">Tidak ada saran ditemukan</div>';
            suggestionsContainer.classList.remove('d-none');
        }

        function hideSuggestions(suggestionsContainer) {
            suggestionsContainer.classList.add('d-none');
            suggestionsContainer.innerHTML = '';
            selectedIndex = -1;
        }

        function updateSelectedItem(items) {
            items.forEach((item, index) => {
                if (index === selectedIndex) {
                    item.classList.add('selected');
                    item.scrollIntoView({
                        block: 'nearest'
                    });
                } else {
                    item.classList.remove('selected');
                }
            });
        }

        function highlightMatch(text, query) {
            if (!query) return escapeHtml(text);
            const regex = new RegExp(`(${escapeRegExp(query)})`, 'gi');
            return escapeHtml(text).replace(regex, '<strong>$1</strong>');
        }

        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

        function escapeRegExp(string) {
            return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
        }
    }

    // Auto-resize card title textarea (ensures no scrollbars, always fits content)
    function autoResizeCardTitle() {
        const cardTitle = document.getElementById('cardTitle');
        if (!cardTitle) return;
        cardTitle.style.height = 'auto';
        // Only grow if text wraps to a new line
        const minHeight = 40;
        // Calculate required height based on scrollHeight
        let newHeight = Math.max(cardTitle.scrollHeight, minHeight);
        cardTitle.style.height = newHeight + 'px';
    }

    document.addEventListener('DOMContentLoaded', function() {
        const cardTitle = document.getElementById('cardTitle');
        if (cardTitle) {
            cardTitle.setAttribute('rows', '1');
            cardTitle.style.overflow = 'hidden';
            // Set initial height to match content so there is no jump
            cardTitle.style.height = 'auto';
            cardTitle.style.height = Math.max(cardTitle.scrollHeight, 40) + 'px';
            cardTitle.addEventListener('input', autoResizeCardTitle);
        }
    });

    document.addEventListener('DOMContentLoaded', function() {
        const cardTitle = document.getElementById('cardTitle');
        if (cardTitle) {
            cardTitle.addEventListener('input', autoResizeCardTitle);
            // Initial resize in case of pre-filled value
            autoResizeCardTitle();
        }
    });

    // Reminder System Implementation
    // Store as window property so it persists across modal opens/closes
    if (!window.currentReminder) {
        window.currentReminder = {
            type: null, // 'quick' or 'custom' or null
            value: null, // days before (for quick) or datetime string (for custom)
            datetime: null, // calculated datetime for the reminder
            displayText: 'None'
        };
    }

    function initializeReminderSystem() {
        const reminderDropdown = document.getElementById('reminderDropdown');
        const clearReminderBtn = document.getElementById('clearReminderBtn');

        // Quick reminder options
        document.querySelectorAll('.reminder-option').forEach(btn => {
            btn.addEventListener('click', function() {
                const type = this.getAttribute('data-type');
                const value = this.getAttribute('data-value');

                if (value === 'none') {
                    clearReminder();
                } else {
                    setQuickReminder(parseInt(value));
                }

                // Close dropdown
                const dropdown = bootstrap.Dropdown.getInstance(reminderDropdown);
                if (dropdown) dropdown.hide();
            });
        });

        // Clear reminder button
        if (clearReminderBtn) {
            clearReminderBtn.addEventListener('click', function(e) {
                e.preventDefault();
                clearReminder();
            });
        }
    }

    function setQuickReminder(daysBefore) {
        const dueDateInput = document.getElementById('cardDueDate');
        const dueDate = dueDateInput?.value;

        if (!dueDate) {
            showAlert('warning', 'Harap tetapkan tanggal deadline terlebih dahulu sebelum mengatur reminder.');
            return;
        }

        // Calculate reminder datetime
        const due = new Date(dueDate);
        const reminderDate = new Date(due);
        reminderDate.setDate(reminderDate.getDate() - daysBefore);
        reminderDate.setHours(9, 0, 0, 0); // Set to 9:00 AM

        // Check if reminder is in the past
        if (reminderDate < new Date()) {
            showAlert('warning',
                `Tanggal reminder (${formatDateTime(reminderDate)}) sudah melewati deadline. Harap pilih opsi yang berbeda.`
            );
            return;
        }

        window.currentReminder = {
            type: 'quick',
            value: daysBefore,
            datetime: reminderDate.toISOString(),
            displayText: `${daysBefore} ${daysBefore === 1 ? 'hari' : daysBefore === 7 ? 'minggu' : 'hari'} sebelum`
        };

        updateReminderUI();
        showAlert('success', `Reminder diatur untuk ${formatDateTime(reminderDate)}!`);

        // Save to backend
        saveReminderToBackend();
    }

    function clearReminder() {
        window.currentReminder = {
            type: null,
            value: null,
            datetime: null,
            displayText: 'None'
        };

        updateReminderUI();
        saveReminderToBackend();
    }

    function updateReminderUI() {
        const buttonText = document.getElementById('reminderButtonText');
        const activeDisplay = document.getElementById('activeReminderDisplay');
        const activeText = document.getElementById('activeReminderText');
        const reminderBtn = document.getElementById('reminderDropdown');

        // Update button text
        if (buttonText) {
            buttonText.textContent = window.currentReminder.displayText;
        }

        // Update button style
        if (reminderBtn) {
            if (window.currentReminder.type) {
                reminderBtn.classList.remove('btn-outline-primary');
                reminderBtn.classList.add('btn-success');
            } else {
                reminderBtn.classList.remove('btn-success');
                reminderBtn.classList.add('btn-outline-primary');
            }
        }

        // Update active reminder display
        if (window.currentReminder.type && activeDisplay && activeText) {
            const reminderDate = new Date(window.currentReminder.datetime);
            activeText.innerHTML = `
        <small class="text-muted">Ingatkan pada:</small><br>
        <strong>${formatDateTime(reminderDate)}</strong>
      `;
            activeDisplay.classList.remove('d-none');
        } else if (activeDisplay) {
            activeDisplay.classList.add('d-none');
        }

        // Highlight active option in dropdown
        document.querySelectorAll('.reminder-option').forEach(btn => {
            btn.classList.remove('active', 'btn-primary');
            btn.classList.add('btn-outline-secondary');

            const btnValue = btn.getAttribute('data-value');
            if (window.currentReminder.type === 'quick') {
                if (btnValue === window.currentReminder.value.toString()) {
                    btn.classList.remove('btn-outline-secondary');
                    btn.classList.add('btn-primary', 'active');
                }
            } else if (window.currentReminder.type === null && btnValue === 'none') {
                btn.classList.remove('btn-outline-secondary');
                btn.classList.add('btn-primary', 'active');
            }
        });
    }

    function formatDateTime(date) {
        const options = {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
            hour12: true
        };
        return date.toLocaleDateString('en-US', options);
    }

    function saveReminderToBackend() {
        const currentCardId = document.getElementById('viewCardModal')?.getAttribute('data-card-id');
        if (!currentCardId) return;

        const reminderUrl = '{{ url('/boards/cards/reminder') }}';

        fetch(reminderUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': CSRF_TOKEN
                },
                body: JSON.stringify({
                    card_id: currentCardId,
                    reminder_days_before: window.currentReminder.type === 'quick' ? window.currentReminder
                        .value : null
                })
            })
            .then(response => response.json())
            .then(data => {
                if (!data.success) {
                    showAlert('danger', `Gagal menyimpan reminder: ${data.message}`);
                    console.error('Error saving reminder:', data.message);
                }
            })
            .catch(error => {
                console.error('Error saving reminder:', error);
                showAlert('danger', 'Error saat menyimpan reminder. Silakan coba lagi.');
            });
    }

    function loadReminderFromCard(cardData) {
        if (!cardData) {
            // No card data, reset to default
            window.currentReminder = {
                type: null,
                value: null,
                datetime: null,
                displayText: 'None'
            };
            updateReminderUI();
            return;
        }

        // Load reminder from card data
        if (cardData.reminder_days_before && cardData.due_date) {
            const daysBefore = cardData.reminder_days_before;

            // Calculate reminder datetime
            const dueDate = new Date(cardData.due_date);
            const reminderDate = new Date(dueDate);
            reminderDate.setDate(reminderDate.getDate() - daysBefore);
            reminderDate.setHours(9, 0, 0, 0); // Set to 9:00 AM

            window.currentReminder = {
                type: 'quick',
                value: daysBefore,
                datetime: reminderDate.toISOString(),
                displayText: `${daysBefore} ${daysBefore === 1 ? 'hari' : daysBefore === 7 ? 'minggu' : 'hari'} sebelum`
            };
        } else {
            // No reminder set, reset to default
            window.currentReminder = {
                type: null,
                value: null,
                datetime: null,
                displayText: 'Tidak ada'
            };
        }

        // Always update UI after loading
        updateReminderUI();
    }

    // Make functions globally accessible
    window.setQuickReminder = setQuickReminder;
    window.clearReminder = clearReminder;
    window.loadReminderFromCard = loadReminderFromCard;

    function hideCardModalLoading() {
        const modalDialog = document.getElementById('viewCardModalDialog');
        const loadingOverlay = document.getElementById('cardModalLoading');
        const modalContent = document.getElementById('cardModalContent');

        // Hide loading overlay
        loadingOverlay.classList.add('d-none');

        // Remove loading class and add loaded class for smooth transition
        modalDialog.classList.remove('modal-loading');
        modalDialog.classList.add('modal-loaded');

        // Restore content visibility
        if (modalContent) {
            modalContent.classList.remove('content-loading');
        }
    }

    // Reset modal state when closed
    document.getElementById('viewCardModal').addEventListener('hidden.bs.modal', function() {
        hideCardModalLoading();
        const modalDialog = document.getElementById('viewCardModalDialog');
        modalDialog.classList.remove('modal-loading', 'modal-loaded');

        // Reset reply state
        hideGlobalReplyPreview();

        // Clear comment input and draft
        const commentInput = document.getElementById('comment-input');
        const cardId = this.getAttribute('data-card-id');
        if (commentInput) {
            commentInput.value = '';
            commentInput.placeholder = 'Tulis komentar..';
        }

        // Clear comment draft from sessionStorage when modal closes
        if (cardId) {
            sessionStorage.removeItem(`commentDraft_${cardId}`);
        }

        // Don't clear reminder - it should persist and be loaded from backend
        // The reminder will be reset/loaded when a new card is opened

        // Restore body scroll when modal closes
        document.body.style.overflow = '';
        document.body.style.paddingRight = '';
        document.body.classList.remove('modal-open');
    });

    // Handle responsive view switching - reset inline styles when viewport changes
    function handleViewCardResponsive() {
        const modalBody = document.querySelector('#viewCardModal .modal-body');
        const leftColumn = document.querySelector('.view-card-left-column');
        const rightColumn = document.querySelector('.view-card-right-column');
        const isDesktop = window.innerWidth >= 992;

        if (modalBody && leftColumn && rightColumn) {
            if (isDesktop) {
                // Desktop view - columns scroll individually
                modalBody.style.overflowY = 'hidden';
                leftColumn.style.overflowY = 'auto';
                rightColumn.style.overflowY = 'auto';
            } else {
                // Mobile view - modal body scrolls
                modalBody.style.overflowY = 'auto';
                leftColumn.style.overflowY = 'visible';
                rightColumn.style.overflowY = 'visible';
            }
        }
    }

    // Listen for window resize
    let resizeTimeout;
    window.addEventListener('resize', function() {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(function() {
            const viewCardModal = document.getElementById('viewCardModal');
            if (viewCardModal && viewCardModal.classList.contains('show')) {
                handleViewCardResponsive();
            }
        }, 100);
    });

    // ========== Toggle Right Column (Komentar & Aktivitas) ==========
    (function() {
        const toggleBtn = document.getElementById('toggleRightColumnBtn');
        const toggleIcon = document.getElementById('toggleRightColumnIcon');
        const toggleText = document.getElementById('toggleRightColumnText');
        let rightColumnVisible = true;

        if (toggleBtn) {
            toggleBtn.addEventListener('click', function() {
                const leftColumn = document.querySelector('.view-card-left-column');
                const rightColumn = document.querySelector('.view-card-right-column');
                if (!leftColumn || !rightColumn) return;

                rightColumnVisible = !rightColumnVisible;

                if (rightColumnVisible) {
                    // Show right column
                    rightColumn.classList.remove('right-column-hidden');
                    leftColumn.classList.remove('left-column-expanded');
                    if (toggleIcon) toggleIcon.className = 'fas fa-comments me-1';
                    if (toggleText) toggleText.textContent = 'Sembunyikan';
                    toggleBtn.title = 'Sembunyikan Komentar & Aktivitas';
                    // Restore scroll behavior
                    rightColumn.style.overflowY = 'auto';
                } else {
                    // Hide right column
                    rightColumn.classList.add('right-column-hidden');
                    leftColumn.classList.add('left-column-expanded');
                    if (toggleIcon) toggleIcon.className = 'fas fa-comments me-1';
                    if (toggleText) toggleText.textContent = 'Tampilkan';
                    toggleBtn.title = 'Tampilkan Komentar & Aktivitas';
                }

                // Resize ECharts after CSS transition completes (350ms)
                setTimeout(function() {
                    const chartDom = document.getElementById('internTasksChart');
                    if (chartDom && typeof echarts !== 'undefined') {
                        const chartInstance = echarts.getInstanceByDom(chartDom);
                        if (chartInstance) chartInstance.resize();
                    }
                }, 400);
            });
        }

        // Reset toggle state when modal opens
        const viewCardModalEl = document.getElementById('viewCardModal');
        if (viewCardModalEl) {
            viewCardModalEl.addEventListener('show.bs.modal', function() {
                rightColumnVisible = true;
                const leftColumn = document.querySelector('.view-card-left-column');
                const rightColumn = document.querySelector('.view-card-right-column');
                if (leftColumn) leftColumn.classList.remove('left-column-expanded');
                if (rightColumn) rightColumn.classList.remove('right-column-hidden');
                if (toggleIcon) toggleIcon.className = 'fas fa-comments me-1';
                if (toggleText) toggleText.textContent = 'Sembunyikan';
                if (toggleBtn) toggleBtn.title = 'Sembunyikan Komentar & Aktivitas';
            });
        }
    })();

    // Reset reply state when modal is shown
    document.getElementById('viewCardModal').addEventListener('show.bs.modal', function() {
        // 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 = 'Tulis komentar..';
        }
    });

    // Restore reply state when modal content is loaded
    document.getElementById('viewCardModal').addEventListener('shown.bs.modal', function() {
        // Apply responsive layout when modal is shown
        handleViewCardResponsive();

        // Try to restore reply state from sessionStorage
        const cardId = this.getAttribute('data-card-id');
        if (cardId) {
            const savedReplyData = sessionStorage.getItem(`replyData_${cardId}`);
            if (savedReplyData) {
                try {
                    const replyData = JSON.parse(savedReplyData);
                    // Restore the reply preview
                    if (typeof showGlobalReplyPreview === 'function') {
                        showGlobalReplyPreview(replyData);
                    }
                } catch (e) {
                    // If parsing fails, remove the corrupted data
                    sessionStorage.removeItem(`replyData_${cardId}`);
                }
            }

            // Restore comment draft
            const savedDraft = sessionStorage.getItem(`commentDraft_${cardId}`);
            const commentInput = document.getElementById('comment-input');
            if (savedDraft && commentInput && commentInput.value === '') {
                commentInput.value = savedDraft;
            }
        }
    });

    // Auto-save function for view card members
    function autoSaveViewCardMembers(memberIds) {
        const currentCardId = document.getElementById('viewCardModal').getAttribute('data-card-id');
        if (currentCardId && memberIds !== undefined && memberIds !== null) {
            // Auto-save member changes
            const updateUrl = "{{ url($url_menu) . '/update' }}";

            fetch(updateUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify({
                        card_id: currentCardId,
                        field: 'members',
                        value: Array.isArray(memberIds) ? memberIds.join(',') : memberIds
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (!data.success) {
                        console.error('Failed to update card members:', data.message);
                    }
                })
                .catch(error => {
                    console.error('Error updating card members:', error);
                });
        }
    }

    function autoSaveViewCardAttachments() {
        const currentCardId = document.getElementById('viewCardModal').getAttribute('data-card-id');
        if (!currentCardId) return;

        // Map attachments to the format expected by the server
        const attachmentsToSave = viewCardAttachments.map(att => {
            const attachment = {};

            // Always include ID if it exists
            if (att.id) {
                attachment.id = att.id;
            }

            // For link attachments
            if (att.link || att.type === 'link') {
                attachment.type = 'link';
                attachment.link = att.link || att.path;
                attachment.path = att.link || att.path;
                attachment.displayText = att.displayText || att.name || null;
                attachment.name = att.displayText || att.name || att.link || att.path;
            }
            // For file attachments (already uploaded)
            else if (att.path) {
                attachment.type = att.type;
                attachment.path = att.path;
                attachment.name = att.name || att.displayText;
                attachment.displayText = att.displayText || att.name;
            }

            return attachment;
        });

        autoSaveCardChanges(currentCardId, 'attachments', attachmentsToSave, (success, response) => {
            if (!success) {
                console.error('Failed to update attachments');
            }
        });
    }

    // Make globally accessible for use in renderViewCardAttachments
    window.autoSaveViewCardAttachments = autoSaveViewCardAttachments;

    // Function to auto-save card changes
    function autoSaveCardChanges(cardId, field, value, callback = null) {
        const updateUrl = "{{ url($url_menu) . '/update' }}";

        fetch(updateUrl, {
                method: 'PUT',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': CSRF_TOKEN
                },
                body: JSON.stringify({
                    action: 'update_card',
                    card_id: cardId,
                    field: field,
                    value: value
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    if (callback) callback(true);
                } else {
                    console.error(`Failed to update card ${field}:`, data.message);
                    if (callback) callback(false);
                }
            })
            .catch(error => {
                console.error(`Error updating card ${field}:`, error);
                if (callback) callback(false);
            });
    }

    // Function to initialize auto-save for view card modal
    function initializeCardAutoSave() {
        let currentCardId = null;
        let isDataLoadedSuccessfully = false;

        // Debounced save function with optimization
        const debouncedSave = (field, value, delay = 500) => {
            // Clear existing timer for this field
            if (saveTimers[field]) {
                clearTimeout(saveTimers[field]);
            }

            // Set new timer
            saveTimers[field] = setTimeout(() => {
                if (isDataLoadedSuccessfully && currentCardId) {
                    autoSaveCardChanges(currentCardId, field, value, (success) => {
                        if (success && field === 'title') {
                            const cardTitleElement = document.getElementById('cardTitle');
                            if (cardTitleElement) {
                                cardTitleElement.setAttribute('data-original-title', value);
                            }
                        }
                    });
                }
            }, delay);
        };

        // Track card title changes with immediate save
        const cardTitleElement = document.getElementById('cardTitle');
        if (cardTitleElement) {
            // Force uppercase conversion on input
            cardTitleElement.addEventListener('input', function() {
                const start = this.selectionStart;
                const end = this.selectionEnd;
                this.value = this.value.toUpperCase();
                this.setSelectionRange(start, end);
            });

            const saveTitleChange = () => {
                // Check if data was loaded successfully before saving
                if (!isDataLoadedSuccessfully || !currentCardId) return;

                const newTitle = cardTitleElement.value.trim().toUpperCase();
                const originalTitle = cardTitleElement.getAttribute('data-original-title') || '';

                if (newTitle !== originalTitle && newTitle !== '') {
                    // Update UI immediately for responsiveness
                    updateCardInBoard(currentCardId, 'title', newTitle);

                    // Save with debouncing
                    debouncedSave('title', newTitle, 500);
                }
            };

            cardTitleElement.addEventListener('blur', saveTitleChange);
            cardTitleElement.addEventListener('keydown', function(e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    this.blur();
                }
            });
        }

        // Track due date changes with immediate save
        const cardDueDateElement = document.getElementById('cardDueDate');
        if (cardDueDateElement) {
            cardDueDateElement.addEventListener('change', function() {
                // Check if data was loaded successfully before saving
                if (!isDataLoadedSuccessfully || !currentCardId) return;

                const newDueDate = this.value;

                // Update priority label IMMEDIATELY (real-time requirement)
                updateCardPriority(newDueDate);

                // Update UI immediately for responsiveness
                updateCardInBoard(currentCardId, 'due_date', newDueDate);

                // Save immediately (no debounce needed for date picker)
                autoSaveCardChanges(currentCardId, 'due_date', newDueDate, (success) => {});
            });
        }

        // Function to update priority display based on due date
        function updateCardPriority(dueDate) {
            const priorityElement = document.getElementById('cardPriority');
            if (!priorityElement) return;

            let priority = 'NORMAL';
            let backgroundColor = '#1890FF';

            if (dueDate) {
                const due = new Date(dueDate);
                const now = new Date();
                const daysUntilDue = Math.ceil((due - now) / (1000 * 60 * 60 * 24));

                // Overdue (sudah melewati deadline)
                if (daysUntilDue < 0) {
                    priority = 'OVERDUE';
                    backgroundColor = '#262626';
                }
                // Urgent (kurang dari atau sama dengan 7 hari)
                else if (daysUntilDue <= 7) {
                    priority = 'URGENT';
                    backgroundColor = '#FF4D4F';
                }
            }

            priorityElement.textContent = priority;
            priorityElement.style.background = backgroundColor;
            priorityElement.style.color = '#ffffff';
        }

        // Function to update the card display in the kanban board
        function updateCardInBoard(cardId, field, value) {
            const taskCard = document.querySelector(`[data-task-id="${cardId}"]`);
            if (!taskCard) return;

            switch (field) {
                case 'title':
                    const taskTitleElement = taskCard.querySelector('.task-title');
                    if (taskTitleElement) {
                        taskTitleElement.textContent = value;
                    }
                    break;

                case 'due_date':
                    if (value) {
                        let taskDateContainer = taskCard.querySelector('.task-date');

                        // Get created date if it exists
                        const createdDateSpan = taskCard.querySelector('.task-date .created-date');
                        const createdDateText = createdDateSpan ? createdDateSpan.textContent : '';

                        if (!taskDateContainer) {
                            // Create new date container with both created and due dates
                            taskDateContainer = document.createElement('div');
                            taskDateContainer.className = 'task-date';
                            taskDateContainer.innerHTML = `
              <i class="far fa-clock"></i>
              ${createdDateText ? `<span class="created-date" title="Created at">${createdDateText}</span><span class="date-separator">·</span>` : ''}
              <span class="due-date" title="Due date"></span>
            `;
                            const taskBottom = taskCard.querySelector('.task-bottom');
                            if (taskBottom) {
                                taskBottom.insertBefore(taskDateContainer, taskBottom.querySelector('.task-stats'));
                            }
                        }

                        // Update due date
                        const dueDateSpan = taskDateContainer.querySelector('.due-date');
                        if (dueDateSpan) {
                            const date = new Date(value);
                            const options = {
                                day: '2-digit',
                                month: 'short',
                                year: '2-digit'
                            };
                            const formattedDate = date.toLocaleDateString('en-GB', options).replace(/,/g, '');
                            dueDateSpan.textContent = formattedDate;
                        }
                    } else {
                        // Remove the entire date container if no due date
                        const taskDateContainer = taskCard.querySelector('.task-date');
                        if (taskDateContainer) {
                            taskDateContainer.remove();
                        }
                    }

                    // Update border color based on due date
                    const borderElement = taskCard.querySelector('.task-card-border');
                    if (borderElement) {
                        borderElement.classList.remove('task-card-border-red', 'task-card-border-blue',
                            'task-card-border-black');

                        let borderColor = 'blue';
                        if (value) {
                            const dueDate = new Date(value);
                            const now = new Date();
                            const daysUntilDue = Math.ceil((dueDate - now) / (1000 * 60 * 60 * 24));

                            // Overdue (sudah melewati deadline)
                            if (daysUntilDue < 0) {
                                borderColor = 'black';
                            }
                            // Urgent (kurang dari atau sama dengan 7 hari)
                            else if (daysUntilDue <= 7) {
                                borderColor = 'red';
                            }
                        }

                        borderElement.classList.add(`task-card-border-${borderColor}`);
                    }
                    break;

                case 'attachments_count':
                case 'comments_count':
                    const taskStats = taskCard.querySelector('.task-stats');
                    if (!taskStats) break;

                    const isAttachment = field === 'attachments_count';
                    const icon = isAttachment ? 'fas fa-paperclip' : 'far fa-comments';

                    // Find the stat item by checking each one
                    let statItem = null;
                    const statItems = taskStats.querySelectorAll('.task-stat-item');
                    for (let item of statItems) {
                        const iconElement = item.querySelector('i');
                        if (iconElement && iconElement.className.includes(isAttachment ? 'fa-paperclip' :
                                'fa-comments')) {
                            statItem = item;
                            break;
                        }
                    }

                    if (value > 0) {
                        if (!statItem) {
                            // Create new stat item
                            statItem = document.createElement('div');
                            statItem.className = 'task-stat-item';
                            statItem.innerHTML = `<i class="${icon}"></i><span>${value}</span>`;
                            taskStats.appendChild(statItem);
                        } else {
                            // Update existing stat item
                            const countSpan = statItem.querySelector('span');
                            if (countSpan) {
                                countSpan.textContent = value;
                            }
                        }
                    } else {
                        // Remove stat item if count is 0
                        if (statItem) {
                            statItem.remove();
                        }
                    }
                    break;
            }
        }

        // Set current card ID and load status when modal opens
        const originalOpenViewCardModal = window.openViewCardModal;
        window.openViewCardModal = function(taskId = null) {
            currentCardId = taskId;
            isDataLoadedSuccessfully = false; // Reset on each open

            // Clear any pending save timers
            Object.keys(saveTimers).forEach(key => {
                if (saveTimers[key]) {
                    clearTimeout(saveTimers[key]);
                    saveTimers[key] = null;
                }
            });

            originalOpenViewCardModal(taskId);
        };

        // Auto-save member changes
        window.autoSaveViewCardMembers = function(memberIds) {
            // Check if data was loaded successfully before saving
            if (isDataLoadedSuccessfully && currentCardId) {
                autoSaveCardChanges(currentCardId, 'members', memberIds, (success) => {});
            }
        };

        // Function to update attachment count in the board
        window.updateCardAttachmentCount = function(cardId, count) {
            updateCardInBoard(cardId, 'attachments_count', count);
        };

        // Function to update comment count in the board
        window.updateCardCommentCount = function(cardId, count) {
            updateCardInBoard(cardId, 'comments_count', count);
        };

        // Update load status when modal content changes
        const modalElement = document.getElementById('viewCardModal');
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.type === 'attributes' && mutation.attributeName === 'data-load-success') {
                    isDataLoadedSuccessfully = modalElement.getAttribute('data-load-success') ===
                        'true';
                }
            });
        });

        observer.observe(modalElement, {
            attributes: true
        });

        // Trigger any pending saves when modal is closing
        modalElement.addEventListener('hide.bs.modal', function() {
            // Flush any pending debounced saves immediately
            if (isDataLoadedSuccessfully && currentCardId) {
                // Execute any pending saves immediately before closing
                Object.keys(saveTimers).forEach(field => {
                    if (saveTimers[field]) {
                        clearTimeout(saveTimers[field]);

                        // Get current values and save immediately
                        if (field === 'title') {
                            const cardTitleElement = document.getElementById('cardTitle');
                            if (cardTitleElement) {
                                const newTitle = cardTitleElement.value.trim();
                                const originalTitle = cardTitleElement.getAttribute(
                                    'data-original-title') || '';
                                if (newTitle !== originalTitle && newTitle !== '') {
                                    autoSaveCardChanges(currentCardId, 'title', newTitle, (success) => {
                                        if (success) {
                                            cardTitleElement.setAttribute('data-original-title',
                                                newTitle);
                                        }
                                    });
                                }
                            }
                        } else if (field === 'description') {
                            const editorTextarea = document.getElementById('cardDescriptionEditor');
                            if (editorTextarea && $(editorTextarea).data('summernote')) {
                                const newDesc = $(editorTextarea).summernote('code');
                                autoSaveCardChanges(currentCardId, 'description', newDesc, (
                                    success) => {});
                            }
                        }

                        saveTimers[field] = null;
                    }
                });
            }
        });

        // Reset when modal closes
        modalElement.addEventListener('hidden.bs.modal', function() {
            currentCardId = null;
            isDataLoadedSuccessfully = false;

            // Clear all save timers
            Object.keys(saveTimers).forEach(key => {
                if (saveTimers[key]) {
                    clearTimeout(saveTimers[key]);
                    saveTimers[key] = null;
                }
            });

            // Re-enable fields in case they were disabled due to error
            document.getElementById('cardTitle').disabled = false;
            const editor = document.getElementById('cardDescriptionEditor');
            if (editor) {
                if ($(editor).data('summernote')) {
                    $(editor).summernote('enable');
                } else {
                    editor.disabled = false;
                    editor.style.cursor = 'text';
                }
            }
            document.getElementById('cardDueDate').disabled = false;

            // Reset loading state
            document.getElementById('cardModalLoading').classList.add('d-none');
            document.getElementById('cardModalContent').classList.remove('loading');

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

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

    // 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">Memuat komentar dan aktivitas..</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 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
            return `${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 = {};
        }

        // TODO: Lokalisasi ke Bahasa Indonesia
        switch (action) {
            case 'card_created':
                const listName = details.list_name || 'list';
                return `${username} added this card to ${listName}`;

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

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

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

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

            case 'member_added':
                const memberName = details.member_name || 'member';
                return `${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 `${username} removed ${removedMemberName} from this card`;

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

            default:
                return `${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">Memuat komentar..</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">Belum ada komentar</small></div>';
            })
            .catch(error => {
                console.error('Error loading comments:', error);
                commentsFeed.innerHTML =
                    '<div class="text-center py-3"><small class="text-muted text-danger">Gagal memuat komentar</small></div>';
            });
    }

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

        // Store mention HTML tags temporarily
        const mentionPlaceholders = [];
        // Match mention spans with various attribute orders and formats
        const mentionRegex = /<span\s+class="mention"[^>]*>@[^<]*<\/span>/gi;

        // Replace mentions with placeholders and store them
        let processedText = text.replace(mentionRegex, (match) => {
            const placeholder = `__MENTION_${mentionPlaceholders.length}__`;
            mentionPlaceholders.push(match);
            return placeholder;
        });

        // Escape HTML to prevent XSS (but mentions are already replaced with placeholders)
        const div = document.createElement('div');
        div.textContent = processedText;
        let escapedText = div.innerHTML;

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

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

        // Restore mentions from placeholders
        escapedText = escapedText.replace(/__MENTION_(\d+)__/g, (match, index) => {
            return mentionPlaceholders[parseInt(index)];
        });

        return escapedText;
    }

    // Available emoji reactions
    const availableEmojis = ['👍', '❤️', '😊', '😂', '😮', '😢', '👏', '🎉'];

    // Build reactions HTML for a comment
    function buildReactionsHTML(commentId, reactions) {
        let reactionBadges = '';

        if (reactions && reactions.length > 0) {
            reactionBadges = reactions.map(r => {
                const userReactedClass = r.user_reacted ? 'user-reacted' : '';
                const usersTooltip = r.users && r.users.length > 0 ? r.users.join(', ') : '';
                return `
                    <span class="reaction-badge ${userReactedClass}" 
                          data-comment-id="${commentId}" 
                          data-emoji="${r.emoji}"
                          title="${usersTooltip}">
                        <span class="reaction-emoji">${r.emoji}</span>
                        <span class="reaction-count">${r.count}</span>
                    </span>
                `;
            }).join('');
        }

        return `
            <div class="comment-reactions" data-comment-id="${commentId}">
                ${reactionBadges}
                <button class="add-reaction-btn" data-comment-id="${commentId}" title="Tambah reaksi">
                    <i class="far fa-smile"></i>
                </button>
            </div>
        `;
    }

    // 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">Belum ada komentar atau aktivitas</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">Membalas kepada <strong>${item.original_message.author}</strong></small>
                  </div>
                  <div class="original-message-text">${truncatedContent}</div>
                </div>
              `;
                        }

                        // Check if current user is the comment author
                        const currentUserId = window.currentUserId || (@json($current_user_id ?? null) ? parseInt(
                            @json($current_user_id ?? null)) : null);
                        const commentAuthorId = item.user?.id || item.user_id;
                        const isCommentAuthor = currentUserId && commentAuthorId && parseInt(currentUserId) ===
                            parseInt(commentAuthorId);

                        // Build action buttons - only show edit/delete if user is the author
                        let actionButtonsHTML = `
              <button class="comment-action-btn reply-btn">
                <i class="fas fa-reply"></i> Balas
              </button>`;

                        if (isCommentAuthor) {
                            actionButtonsHTML += `
              <button class="comment-action-btn edit-comment-btn" data-comment-id="${item.id}">
                <i class="fas fa-edit"></i> Ubah
              </button>
              <button class="comment-action-btn delete-comment-btn" data-comment-id="${item.id}">
                <i class="fas fa-trash"></i> Hapus
              </button>`;
                        }

                        // 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>';
                        }

                        // Build reactions HTML
                        let reactionsHTML = buildReactionsHTML(item.id, item.reactions || []);

                        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>
              ${reactionsHTML}
              ${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';
                    
                    // Check if current user is the reply author
                    const replyAuthorId = reply.user?.id || reply.user_id;
                    const isReplyAuthor = currentUserId && replyAuthorId && parseInt(currentUserId) === parseInt(replyAuthorId);
                    
                    // Build reply action buttons
                    let replyActionButtons = `
                      <button class="reply-to-reply-btn btn btn-sm btn-link p-0" data-reply-id="${reply.id}" data-comment-id="${item.id}">
                        <i class="fas fa-reply me-1"></i> Balas
                      </button>`;

                        if (isReplyAuthor) {
                            replyActionButtons += `
                      <button class="edit-reply-btn btn btn-sm btn-link p-0" data-reply-id="${reply.id}" data-comment-id="${item.id}">
                        <i class="fas fa-edit me-1"></i> Ubah
                      </button>
                      <button class="delete-reply-btn btn btn-sm btn-link p-0" data-reply-id="${reply.id}" data-comment-id="${item.id}">
                        <i class="fas fa-trash me-1"></i> Hapus
                      </button>`;
                        }

                        // 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';
                                  
                                  // Check if current user is the child reply author
                                  const childReplyAuthorId = childReply.user?.id || childReply.user_id;
                                  const isChildReplyAuthor = currentUserId && childReplyAuthorId && parseInt(currentUserId) === parseInt(childReplyAuthorId);
                                  
                                  // Build child reply action buttons
                                  let childReplyActionButtons = `
                                    <button class="reply-to-reply-btn btn btn-sm btn-link p-0" data-reply-id="${childReply.id}" data-comment-id="${item.id}">
                                      <i class="fas fa-reply me-1"></i> Balas
                                    </button>`;

                        if (isChildReplyAuthor) {
                            childReplyActionButtons += `
                                    <button class="edit-reply-btn btn btn-sm btn-link p-0" data-reply-id="${childReply.id}" data-comment-id="${item.id}">
                                      <i class="fas fa-edit me-1"></i> Ubah
                                    </button>
                                    <button class="delete-reply-btn btn btn-sm btn-link p-0" data-reply-id="${childReply.id}" data-comment-id="${item.id}">
                                      <i class="fas fa-trash me-1"></i> Hapus
                                    </button>`;
                        }

                        // 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 add comment
    function initializeCommentSystem() {
        const commentInput = document.getElementById('comment-input');
        const commentsFeed = document.querySelector('.comments-feed');
        const addCommentBtn = document.getElementById('addCommentBtn');

        if (!commentInput || !commentsFeed) return;

        // Auto-save comment input to sessionStorage
        commentInput.addEventListener('input', function() {
            const cardId = document.getElementById('viewCardModal').getAttribute('data-card-id');
            if (cardId) {
                sessionStorage.setItem(`commentDraft_${cardId}`, this.value);
            }
        });

        // Restore comment draft when modal loads
        const cardId = document.getElementById('viewCardModal').getAttribute('data-card-id');
        if (cardId) {
            const savedDraft = sessionStorage.getItem(`commentDraft_${cardId}`);
            if (savedDraft && commentInput.value === '') {
                commentInput.value = savedDraft;
            }
        }

        // Add event listener for Enter key and button click
        commentInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                addComment();
            }
        });

        // Add event listener for button click
        if (addCommentBtn) {
            addCommentBtn.addEventListener('click', function() {
                addComment();
            });
        }

        function addComment() {
            const content = commentInput.value.trim();
            if (!content) {
                showAlert('danger', `Masukkan komentar.`);
                return;
            }

            // Prevent multiple submissions
            if (commentInput.disabled) {
                return;
            }

            // Get current card ID from modal
            const currentCardId = window.currentCardId || document.getElementById('cardTitle')?.getAttribute(
                'data-card-id');
            if (!currentCardId) {
                showAlert('danger', 'ID card tidak ditemukan.');
                return;
            }

            // Show loading state
            const addCommentBtn = document.getElementById('addCommentBtn');
            commentInput.disabled = true;
            commentInput.placeholder = 'Menambahkan komentar..';
            if (addCommentBtn) {
                addCommentBtn.disabled = true;
                addCommentBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
            }

            // Add visual feedback
            commentInput.style.opacity = '0.6';

            // Check if this is a reply
            const replyData = window.currentReplyData;
            const requestData = {
                card_id: currentCardId,
                comment_content: content
            };

            // Add original message data if this is a reply
            if (replyData) {
                requestData.original_message = {
                    author: replyData.authorName,
                    content: replyData.content,
                    type: replyData.type || 'comment'
                };
            }

            // Send comment to server
            fetch('{{ url('/boards/comments') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify(requestData)
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showAlert('success', 'Komentar berhasil ditambahkan!');

                        // Add comment to UI (now with original message preview if it's a reply)
                        addCommentToTop(data.comment);

                        // Update comment count in the board view
                        if (data.comments_count !== undefined) {
                            window.updateCardCommentCount(currentCardId, data.comments_count);
                        }

                        // Clear input
                        commentInput.value = '';

                        // Clear comment draft from sessionStorage
                        const cardId = document.getElementById('viewCardModal').getAttribute('data-card-id');
                        if (cardId) {
                            sessionStorage.removeItem(`commentDraft_${cardId}`);
                        }

                        // Hide reply preview if this was a reply
                        if (replyData) {
                            hideGlobalReplyPreview();
                        }
                    } else {
                        showAlert('danger', 'Error saat menambahkan komentar: ' + (data.message ||
                            'Unknown error'));
                    }
                })
                .catch(error => {
                    console.error('Error adding comment:', error);

                })
                .finally(() => {
                    // Reset input state
                    const addCommentBtn = document.getElementById('addCommentBtn');
                    commentInput.disabled = false;
                    commentInput.placeholder = 'Tulis komentar..';
                    commentInput.style.opacity = '1';
                    if (addCommentBtn) {
                        addCommentBtn.disabled = false;
                        addCommentBtn.innerHTML = '<i class="fas fa-paper-plane me-1"></i>Kirim';
                    }
                });
        }

        // Make addComment function globally accessible
        window.addComment = addComment;
    }

    // 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';
        }
    }

    // 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);
        }
    }

    // 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 = 'Semua';
                break;
            case 'comments':
                commentItems.forEach(item => item.style.display = 'block');
                activityItems.forEach(item => item.style.display = 'none');
                if (filterText) filterText.textContent = 'Komentar';
                break;
            case 'activities':
                commentItems.forEach(item => item.style.display = 'none');
                activityItems.forEach(item => item.style.display = 'block');
                if (filterText) filterText.textContent = 'Aktivitas';
                break;
        }

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

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

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

    // Functions for Reply System

    // Initialize reply system
    function initializeReplyAndReactionSystem() {
        // Add event delegation for comment actions
        const commentsFeed = document.querySelector('.comments-feed');
        if (!commentsFeed) return;

        commentsFeed.addEventListener('click', function(e) {
            // Handle reply button clicks
            if (e.target.closest('.reply-btn')) {
                handleReplyClick(e.target.closest('.reply-btn'));
            }
            // Handle reply-to-reply button clicks
            else if (e.target.closest('.reply-to-reply-btn')) {
                handleReplyToReplyClick(e.target.closest('.reply-to-reply-btn'));
            }
            // Handle edit comment button clicks
            else if (e.target.closest('.edit-comment-btn')) {
                handleEditCommentClick(e.target.closest('.edit-comment-btn'));
            }
            // Handle delete comment button clicks
            else if (e.target.closest('.delete-comment-btn')) {
                handleDeleteCommentClick(e.target.closest('.delete-comment-btn'));
            }
            // Handle edit reply button clicks
            else if (e.target.closest('.edit-reply-btn')) {
                handleEditReplyClick(e.target.closest('.edit-reply-btn'));
            }
            // Handle delete reply button clicks
            else if (e.target.closest('.delete-reply-btn')) {
                handleDeleteReplyClick(e.target.closest('.delete-reply-btn'));
            }
            // Handle add reaction button clicks
            else if (e.target.closest('.add-reaction-btn')) {
                handleAddReactionClick(e.target.closest('.add-reaction-btn'), e);
            }
            // Handle reaction badge clicks (toggle reaction)
            else if (e.target.closest('.reaction-badge')) {
                handleReactionBadgeClick(e.target.closest('.reaction-badge'));
            }
            // Handle emoji option clicks in picker
            else if (e.target.closest('.emoji-option')) {
                handleEmojiOptionClick(e.target.closest('.emoji-option'));
            }
        });
    }

    // Handle reply button click
    function handleReplyClick(replyBtn) {
        const commentItem = replyBtn.closest('.comment-item');
        const commentId = commentItem.dataset.commentId;

        // Get original comment data for preview
        const authorName = commentItem.querySelector('.comment-author-name')?.textContent || 'Unknown';
        const commentContent = commentItem.querySelector('.comment-content')?.textContent || '';
        const commentTime = commentItem.querySelector('.comment-time')?.textContent || '';

        // Show reply preview in global comment form
        showGlobalReplyPreview({
            authorName: authorName,
            content: commentContent,
            time: commentTime,
            type: 'comment',
            targetCommentId: commentId
        });

        // Show action buttons
        const actionButtons = document.getElementById('comment-action-buttons');
        if (actionButtons) {
            actionButtons.classList.remove('d-none');
        }

        // Focus on the global comment input
        const commentInput = document.getElementById('comment-input');
        if (commentInput) {
            commentInput.focus();
            commentInput.placeholder = 'Tulis balasan..';
        }
    }

    // Handle reply to reply button click
    function handleReplyToReplyClick(replyToReplyBtn) {
        const replyItem = replyToReplyBtn.closest('.reply-item');
        const commentItem = replyToReplyBtn.closest('.comment-item');
        const replyId = replyToReplyBtn.dataset.replyId;
        const commentId = replyToReplyBtn.dataset.commentId;

        // Get original reply data for preview - using correct selectors
        const authorName = replyItem.querySelector('.reply-author')?.textContent || 'Unknown';
        const replyContent = replyItem.querySelector('.reply-content')?.textContent || '';
        const replyTime = replyItem.querySelector('.reply-time')?.textContent || '';

        // Show reply preview in global comment form
        showGlobalReplyPreview({
            authorName: authorName,
            content: replyContent,
            time: replyTime,
            type: 'reply',
            targetCommentId: commentId,
            targetReplyId: replyId
        });

        // Show action buttons
        const actionButtons = document.getElementById('comment-action-buttons');
        if (actionButtons) {
            actionButtons.classList.remove('d-none');
        }

        // Focus on the global comment input
        const commentInput = document.getElementById('comment-input');
        if (commentInput) {
            commentInput.focus();
            commentInput.placeholder = `Membalas kepada ${authorName}...`;
        }
    }

    // Handle edit comment button click
    function handleEditCommentClick(editBtn) {
        const commentItem = editBtn.closest('.comment-item');
        const commentId = commentItem.dataset.commentId;
        const commentBubble = commentItem.querySelector('.comment-bubble');
        const commentContent = commentItem.querySelector('.comment-content');
        const originalText = commentContent.textContent.trim();

        // Check if edit form already exists
        const existingEditForm = commentItem.querySelector('.comment-edit-form');
        if (existingEditForm) {
            return; // Already in edit mode
        }

        // Create edit form with mention dropdown
        const editForm = document.createElement('div');
        editForm.className = 'comment-edit-form mt-2';
        editForm.style.position = 'relative';
        editForm.innerHTML = `
      <div class="edit-input-wrapper" style="position: relative;">
        <textarea class="form-control comment-edit-input" rows="3">${originalText}</textarea>
        <div class="edit-mention-dropdown mention-dropdown d-none" style="position: absolute; top: 100%; left: 0; right: 0; z-index: 10600; background: #fff; border: 1px solid #dee2e6; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); max-height: 200px; overflow-y: auto;">
          <div class="mention-header px-3 py-2 bg-light border-bottom">
            <small class="text-muted fw-bold">Mention anggota</small>
          </div>
          <div class="edit-mention-list"></div>
        </div>
      </div>
      <div class="d-flex gap-2 mt-2 justify-content-end">
        <button class="btn btn-sm btn-outline-secondary cancel-edit-btn">
          Batal
        </button>
        <button class="btn btn-sm btn-primary save-edit-btn">
          <i class="fas fa-paper-plane me-1"></i> Kirim
        </button>
      </div>
    `;

        // Hide original content and show edit form
        commentBubble.style.display = 'none';
        commentItem.querySelector('.comment-actions').style.display = 'none';
        commentItem.querySelector('.flex-grow-1').appendChild(editForm);

        const editInput = editForm.querySelector('.comment-edit-input');
        editInput.focus();
        editInput.setSelectionRange(editInput.value.length, editInput.value.length);

        // Initialize mention system for edit textarea
        initializeEditMentionSystem(editForm, editInput);

        // Handle save
        editForm.querySelector('.save-edit-btn').addEventListener('click', function() {
            const newText = editInput.value.trim();
            if (!newText) {
                showAlert('danger', 'Komentar tidak diperbolehkan kosong.');
                return;
            }

            // Show loading state
            this.disabled = true;
            this.innerHTML =
                '<i class="fas fa-spinner fa-spin me-1 text-white"></i> <span class="text-white">Menyimpan..</span>';

            const updateCommentUrl = `{{ url('/boards/comments') }}/${commentId}`;

            fetch(updateCommentUrl, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': CSRF_TOKEN
                    },
                    body: JSON.stringify({
                        content: newText
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        commentContent.innerHTML = linkifyText(newText);

                        let editedIndicator = commentContent.querySelector('.edited-indicator');
                        if (!editedIndicator) {
                            editedIndicator = document.createElement('small');
                            editedIndicator.className = 'edited-indicator text-muted';
                            editedIndicator.style.fontSize = '0.75em';
                            editedIndicator.style.marginLeft = '0.5em';
                            editedIndicator.textContent = '(diubah)';
                            commentContent.appendChild(document.createTextNode(' '));
                            commentContent.appendChild(editedIndicator);
                        }

                        editForm.remove();
                        commentBubble.style.display = 'block';
                        commentItem.querySelector('.comment-actions').style.display = 'flex';
                        showAlert('success', 'Komentar berhasil diperbarui!');
                    } else {
                        showAlert('danger',
                            `Error saat memperbarui komentar: ${data.message || 'Unknown error'}`);
                        this.disabled = false;
                        this.innerHTML = '<i class="fas fa-check me-1"></i> Simpan';
                    }
                })
                .catch(error => {
                    console.error('Error updating comment:', error);
                    showAlert('danger', 'Error saat memperbarui komentar.');
                    this.disabled = false;
                    this.innerHTML = '<i class="fas fa-check me-1"></i> Simpan';
                });
        });

        // Handle cancel
        editForm.querySelector('.cancel-edit-btn').addEventListener('click', function() {
            editForm.remove();
            commentBubble.style.display = 'block';
            commentItem.querySelector('.comment-actions').style.display = 'flex';
        });

        // Handle Escape key
        editInput.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                editForm.querySelector('.cancel-edit-btn').click();
            }
        });
    }

    // Handle delete comment button click
    function handleDeleteCommentClick(deleteBtn) {
        const commentItem = deleteBtn.closest('.comment-item');
        const commentId = commentItem.dataset.commentId;

        const dropdown = document.getElementById('confirmDeleteCommentDropdown');

        // Show dropdown
        dropdown.style.display = 'block';

        // Destroy existing Popper instance if any
        if (window.deleteCommentPopperInstance) {
            window.deleteCommentPopperInstance.destroy();
        }

        // Create Popper instance with boundary detection
        window.deleteCommentPopperInstance = Popper.createPopper(deleteBtn, dropdown, {
            placement: 'bottom-start',
            modifiers: [{
                    name: 'preventOverflow',
                    options: {
                        boundary: 'viewport',
                        padding: 8,
                    },
                },
                {
                    name: 'flip',
                    options: {
                        fallbackPlacements: ['top-start', 'bottom-end', 'top-end', 'right', 'left'],
                    },
                },
                {
                    name: 'offset',
                    options: {
                        offset: [0, 5],
                    },
                },
            ],
        });

        // Store comment info for later use
        dropdown.dataset.commentId = commentId;
        dropdown.dataset.commentItemId = commentItem.dataset.commentId;
    }

    // Handle confirm delete comment
    function confirmDeleteComment() {
        const dropdown = document.getElementById('confirmDeleteCommentDropdown');
        const commentId = dropdown.dataset.commentId;
        const commentItem = document.querySelector(`.comment-item[data-comment-id="${commentId}"]`);

        if (!commentItem) return;

        const btnText = document.querySelector('#confirmDeleteCommentBtn .btn-text');
        const btnLoading = document.querySelector('#confirmDeleteCommentBtn .btn-loading');
        const confirmBtn = document.getElementById('confirmDeleteCommentBtn');
        const cancelBtn = document.getElementById('cancelDeleteCommentBtn');

        // Show loading state
        btnText.classList.add('d-none');
        btnLoading.classList.remove('d-none');
        confirmBtn.disabled = true;
        cancelBtn.disabled = true;
        commentItem.style.opacity = '0.5';

        // Call backend API to delete comment
        fetch(`{{ url('/boards/comments') }}/${commentId}`, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Hide dropdown
                    dropdown.style.display = 'none';

                    // Destroy Popper instance
                    if (window.deleteCommentPopperInstance) {
                        window.deleteCommentPopperInstance.destroy();
                        window.deleteCommentPopperInstance = null;
                    }

                    // Add fade-out animation
                    commentItem.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
                    commentItem.style.opacity = '0';
                    commentItem.style.transform = 'translateX(-20px)';

                    setTimeout(() => {
                        commentItem.remove();
                        showAlert('success', 'Komentar berhasil dihapus!');

                        // Update comment count in the board view
                        const currentCardId = window.currentCardId || document.getElementById('cardTitle')
                            ?.getAttribute('data-card-id');
                        if (currentCardId && data.comments_count !== undefined) {
                            window.updateCardCommentCount(currentCardId, data.comments_count);
                        }

                        // Check if comments feed is empty
                        const commentsFeed = document.querySelector('.comments-feed');
                        if (commentsFeed && commentsFeed.children.length === 0) {
                            commentsFeed.innerHTML =
                                '<div class="text-center py-3"><small class="text-muted">Belum ada komentar atau aktivitas</small></div>';
                        }
                    }, 300);
                } else {
                    showAlert('danger', 'Error deleting comment: ' + (data.message || 'Unknown error'));
                    // Reset loading state
                    commentItem.style.opacity = '1';
                    btnText.classList.remove('d-none');
                    btnLoading.classList.add('d-none');
                    confirmBtn.disabled = false;
                    cancelBtn.disabled = false;
                }
            })
            .catch(error => {
                console.error('Error deleting comment:', error);
                showAlert('danger', 'Error saat menghapus komentar.');
                // Reset loading state
                commentItem.style.opacity = '1';
                btnText.classList.remove('d-none');
                btnLoading.classList.add('d-none');
                confirmBtn.disabled = false;
                cancelBtn.disabled = false;
            })
            .finally(() => {
                // Reset button state
                btnText.classList.remove('d-none');
                btnLoading.classList.add('d-none');
                confirmBtn.disabled = false;
                cancelBtn.disabled = false;
            });
    }

    // Handle cancel delete comment
    function cancelDeleteComment() {
        const dropdown = document.getElementById('confirmDeleteCommentDropdown');
        dropdown.style.display = 'none';

        // Destroy Popper instance
        if (window.deleteCommentPopperInstance) {
            window.deleteCommentPopperInstance.destroy();
            window.deleteCommentPopperInstance = null;
        }
    }

    // Handle edit reply button click
    function handleEditReplyClick(editBtn) {
        const replyItem = editBtn.closest('.reply-item');
        const replyId = editBtn.dataset.replyId;
        const commentId = editBtn.dataset.commentId;
        const replyBubble = replyItem.querySelector('.reply-bubble');
        const replyContent = replyItem.querySelector('.reply-content');
        const originalText = replyContent.textContent.trim();

        // Check if edit form already exists
        const existingEditForm = replyItem.querySelector('.reply-edit-form');
        if (existingEditForm) {
            return; // Already in edit mode
        }

        // Create edit form
        const editForm = document.createElement('div');
        editForm.className = 'reply-edit-form mt-2';
        editForm.innerHTML = `
      <textarea class="form-control reply-edit-input" rows="2">${originalText}</textarea>
      <div class="d-flex gap-2 mt-2">
        <button class="btn btn-sm btn-primary save-reply-edit-btn">
          <i class="fas fa-check me-1"></i> Simpan
        </button>
        <button class="btn btn-sm btn-secondary cancel-reply-edit-btn">
          <i class="fas fa-times me-1"></i> Batal
        </button>
      </div>
    `;

        // Hide original content and show edit form
        replyContent.style.display = 'none';
        replyItem.querySelector('.reply-actions').style.display = 'none';
        replyItem.querySelector('.flex-grow-1').appendChild(editForm);

        const editInput = editForm.querySelector('.reply-edit-input');
        editInput.focus();
        editInput.setSelectionRange(editInput.value.length, editInput.value.length);

        // Handle save
        editForm.querySelector('.save-reply-edit-btn').addEventListener('click', function() {
            const newText = editInput.value.trim();
            if (!newText) {
                showAlert('danger', 'Balasan tidak diperbolehkan kosong');
                return;
            }

            // Show loading state
            this.disabled = true;
            this.innerHTML =
                '<i class="fas fa-spinner fa-spin me-1 text-white"></i> <span class="text-white">Menyimpan..</span>';

            // Call backend API to save edited reply
            fetch(`{{ url('/boards/comments/replies') }}/${replyId}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                            'content')
                    },
                    body: JSON.stringify({
                        content: newText
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Clear existing content and apply linkifyText
                        replyContent.innerHTML = linkifyText(newText);

                        // Add edited indicator at the end of reply content
                        let editedIndicator = replyContent.querySelector('.edited-indicator');
                        if (!editedIndicator) {
                            editedIndicator = document.createElement('small');
                            editedIndicator.className = 'edited-indicator text-muted';
                            editedIndicator.style.fontSize = '0.75em';
                            editedIndicator.style.marginLeft = '0.5em';
                            editedIndicator.textContent = '(diubah)';
                            replyContent.appendChild(document.createTextNode(' '));
                            replyContent.appendChild(editedIndicator);
                        }

                        // Remove edit form and show original content
                        editForm.remove();
                        replyContent.style.display = 'block';
                        replyItem.querySelector('.reply-actions').style.display = 'flex';

                        showAlert('success', 'Balasan berhasil diperbarui!');
                    } else {
                        showAlert('danger', 'Error saat memperbarui balasan: ' + (data.message ||
                            'Unknown error'));
                        // Re-enable button
                        this.disabled = false;
                        this.innerHTML = '<i class="fas fa-check me-1"></i> Simpan';
                    }
                })
                .catch(error => {
                    console.error('Error updating reply:', error);
                    showAlert('danger', 'Error saat memperbarui balasan.');
                    // Re-enable button
                    this.disabled = false;
                    this.innerHTML = '<i class="fas fa-check me-1"></i> Simpan';
                });
        });

        // Handle cancel
        editForm.querySelector('.cancel-reply-edit-btn').addEventListener('click', function() {
            editForm.remove();
            replyContent.style.display = 'block';
            replyItem.querySelector('.reply-actions').style.display = 'flex';
        });

        // Handle Escape key
        editInput.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                editForm.querySelector('.cancel-reply-edit-btn').click();
            }
        });
    }

    // Handle delete reply button click
    function handleDeleteReplyClick(deleteBtn) {
        const replyItem = deleteBtn.closest('.reply-item');
        const replyId = deleteBtn.dataset.replyId;
        const commentId = deleteBtn.dataset.commentId;

        // Get button position for dropdown placement
        const btnRect = deleteBtn.getBoundingClientRect();
        const dropdown = document.getElementById('confirmDeleteReplyDropdown');

        // Position dropdown near the button
        dropdown.style.display = 'block';
        dropdown.style.top = (btnRect.bottom + window.scrollY + 5) + 'px';
        dropdown.style.left = (btnRect.left + window.scrollX) + 'px';

        // Store reply info for later use
        dropdown.dataset.replyId = replyId;
        dropdown.dataset.commentId = commentId;
    }

    // Handle confirm delete reply
    function confirmDeleteReply() {
        const dropdown = document.getElementById('confirmDeleteReplyDropdown');
        const replyId = dropdown.dataset.replyId;
        const commentId = dropdown.dataset.commentId;
        const replyItem = document.querySelector(`.reply-item[data-reply-id="${replyId}"]`);

        if (!replyItem) return;

        const btnText = document.querySelector('#confirmDeleteReplyBtn .btn-text');
        const btnLoading = document.querySelector('#confirmDeleteReplyBtn .btn-loading');
        const confirmBtn = document.getElementById('confirmDeleteReplyBtn');
        const cancelBtn = document.getElementById('cancelDeleteReplyBtn');

        // Show loading state
        btnText.classList.add('d-none');
        btnLoading.classList.remove('d-none');
        confirmBtn.disabled = true;
        cancelBtn.disabled = true;
        replyItem.style.opacity = '0.5';

        // Call backend API to delete reply
        fetch(`{{ url('/boards/comments/replies') }}/${replyId}`, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Hide dropdown
                    dropdown.style.display = 'none';

                    // Add fade-out animation
                    replyItem.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
                    replyItem.style.opacity = '0';
                    replyItem.style.transform = 'translateX(-20px)';

                    setTimeout(() => {
                        // Check if this is the last reply in the thread
                        const replyThread = replyItem.closest('.reply-thread, .nested-replies');
                        const remainingReplies = replyThread.querySelectorAll('.reply-item').length;

                        replyItem.remove();
                        showAlert('success', 'Balasan berhasil dihapus!');

                        // If no more replies, remove the thread container
                        if (remainingReplies <= 1) {
                            replyThread.remove();
                        } else {
                            // Update reply count badge
                            const badge = replyThread.querySelector('.badge');
                            if (badge) {
                                const newCount = remainingReplies - 1;
                                badge.innerHTML =
                                    `<i class="fas fa-comments me-1"></i>${newCount} ${newCount === 1 ? 'Reply' : 'Replies'}`;
                            }
                        }
                    }, 300);
                } else {
                    showAlert('danger', 'Error saat menghapus balasan: ' + (data.message || 'Unknown error'));
                    // Reset loading state
                    replyItem.style.opacity = '1';
                    btnText.classList.remove('d-none');
                    btnLoading.classList.add('d-none');
                    confirmBtn.disabled = false;
                    cancelBtn.disabled = false;
                }
            })
            .catch(error => {
                console.error('Error deleting reply:', error);
                showAlert('danger', 'Error saat menghapus balasan.');
                // Reset loading state
                replyItem.style.opacity = '1';
                btnText.classList.remove('d-none');
                btnLoading.classList.add('d-none');
                confirmBtn.disabled = false;
                cancelBtn.disabled = false;
            })
            .finally(() => {
                // Reset button state
                btnText.classList.remove('d-none');
                btnLoading.classList.add('d-none');
                confirmBtn.disabled = false;
                cancelBtn.disabled = false;
            });
    }

    // Handle cancel delete reply
    function cancelDeleteReply() {
        const dropdown = document.getElementById('confirmDeleteReplyDropdown');
        dropdown.style.display = 'none';
    }

    // ============ COMMENT REACTION FUNCTIONS ============

    // Current emoji picker reference
    let currentEmojiPicker = null;

    // Handle add reaction button click - show emoji picker
    function handleAddReactionClick(btn, event) {
        event.stopPropagation();
        const commentId = btn.dataset.commentId;

        // Close any existing emoji picker
        closeEmojiPicker();

        // Create emoji picker dropdown
        const picker = document.createElement('div');
        picker.className = 'emoji-picker-dropdown show';
        picker.dataset.commentId = commentId;
        picker.innerHTML = `
            <div class="emoji-picker-grid">
                ${availableEmojis.map(emoji => `
                    <span class="emoji-option" data-emoji="${emoji}" data-comment-id="${commentId}">${emoji}</span>
                `).join('')}
            </div>
        `;

        // Position the picker near the button
        const btnRect = btn.getBoundingClientRect();
        picker.style.position = 'fixed';
        picker.style.top = (btnRect.bottom + 5) + 'px';
        picker.style.left = btnRect.left + 'px';

        document.body.appendChild(picker);
        currentEmojiPicker = picker;

        // Add click handlers directly to emoji options
        picker.querySelectorAll('.emoji-option').forEach(emojiOption => {
            emojiOption.addEventListener('click', function(e) {
                e.stopPropagation();
                const emoji = this.dataset.emoji;
                const cId = this.dataset.commentId;
                closeEmojiPicker();
                addReaction(cId, emoji);
            });
        });

        // Close picker when clicking outside
        setTimeout(() => {
            document.addEventListener('click', closeEmojiPickerOnOutsideClick);
        }, 10);
    }

    // Close emoji picker when clicking outside
    function closeEmojiPickerOnOutsideClick(e) {
        if (currentEmojiPicker && !currentEmojiPicker.contains(e.target) && !e.target.closest('.add-reaction-btn')) {
            closeEmojiPicker();
        }
    }

    // Close emoji picker
    function closeEmojiPicker() {
        if (currentEmojiPicker) {
            currentEmojiPicker.remove();
            currentEmojiPicker = null;
            document.removeEventListener('click', closeEmojiPickerOnOutsideClick);
        }
    }

    // Handle emoji option click - add reaction
    function handleEmojiOptionClick(emojiOption) {
        const emoji = emojiOption.dataset.emoji;
        const commentId = emojiOption.dataset.commentId;

        closeEmojiPicker();
        addReaction(commentId, emoji);
    }

    // Handle reaction badge click - toggle reaction
    function handleReactionBadgeClick(badge) {
        const commentId = badge.dataset.commentId;
        const emoji = badge.dataset.emoji;
        const userReacted = badge.classList.contains('user-reacted');

        if (!commentId) {
            return;
        }

        if (userReacted) {
            removeReaction(commentId, emoji);
        } else {
            addReaction(commentId, emoji);
        }
    }

    // Add reaction to comment
    function addReaction(commentId, emoji) {
        fetch('{{ url('/boards/comments/reactions') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': CSRF_TOKEN,
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify({
                    comment_id: parseInt(commentId),
                    emoji: emoji
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    updateCommentReactions(commentId, data.reactions);
                } else {
                    // If user already reacted, also update UI to reflect current state
                    if (data.message === 'Already reacted with this emoji' && data.reactions) {
                        updateCommentReactions(commentId, data.reactions);
                    } else {
                        showAlert('danger', data.message || 'Gagal menambah reaksi');
                    }
                }
            })
            .catch(error => {
                console.error('Error adding reaction:', error);
                showAlert('danger', 'Error saat menambah reaksi');
            });
    }

    // Remove reaction from comment
    function removeReaction(commentId, emoji) {
        fetch('{{ url('/boards/comments/reactions/remove') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': CSRF_TOKEN,
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify({
                    comment_id: parseInt(commentId),
                    emoji: emoji
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    updateCommentReactions(commentId, data.reactions);
                } else {
                    showAlert('danger', data.message || 'Gagal menghapus reaksi');
                }
            })
            .catch(error => {
                console.error('Error removing reaction:', error);
                showAlert('danger', 'Error saat menghapus reaksi');
            });
    }

    // Update reactions UI for a comment
    function updateCommentReactions(commentId, reactions) {
        const reactionsContainer = document.querySelector(`.comment-reactions[data-comment-id="${commentId}"]`);

        if (!reactionsContainer) {
            return;
        }

        // Build new reactions HTML
        let reactionBadges = '';

        if (reactions && reactions.length > 0) {
            reactionBadges = reactions.map(r => {
                const userReactedClass = r.user_reacted ? 'user-reacted' : '';
                const usersTooltip = r.users && r.users.length > 0 ? r.users.join(', ') : '';
                return `
                    <span class="reaction-badge ${userReactedClass}" 
                          data-comment-id="${commentId}" 
                          data-emoji="${r.emoji}"
                          title="${usersTooltip}">
                        <span class="reaction-emoji">${r.emoji}</span>
                        <span class="reaction-count">${r.count}</span>
                    </span>
                `;
            }).join('');
        }

        const newHTML = `
            ${reactionBadges}
            <button class="add-reaction-btn" data-comment-id="${commentId}" title="Tambah reaksi">
                <i class="far fa-smile"></i>
            </button>
        `;

        reactionsContainer.innerHTML = newHTML;
    }

    // ============ END COMMENT REACTION FUNCTIONS ============

    // Show global reply preview in main comment form
    function showGlobalReplyPreview(originalData) {
        const replyPreview = document.getElementById('reply-preview');
        const replyToUser = document.getElementById('reply-to-user');
        const replyPreviewText = document.getElementById('reply-preview-text');

        if (!replyPreview) return;

        // Update preview content
        if (replyToUser) {
            replyToUser.textContent = originalData.authorName;
        }

        if (replyPreviewText) {
            const truncatedContent = originalData.content.length > 100 ?
                originalData.content.substring(0, 100) + '...' :
                originalData.content;
            replyPreviewText.textContent = truncatedContent;
        }

        // Store reply data for later use
        window.currentReplyData = originalData;

        // Save to sessionStorage for persistence across page refreshes
        const cardId = document.getElementById('viewCardModal').getAttribute('data-card-id');
        if (cardId) {
            sessionStorage.setItem(`replyData_${cardId}`, JSON.stringify(originalData));
        }

        // Show the preview
        replyPreview.classList.remove('d-none');

        // Update comment input placeholder
        const commentInput = document.getElementById('comment-input');
        if (commentInput) {
            commentInput.placeholder = `Membalas kepada ${originalData.authorName}...`;
            commentInput.focus();
        }
    }

    // Hide global reply preview
    function hideGlobalReplyPreview() {
        const replyPreview = document.getElementById('reply-preview');
        if (replyPreview) {
            replyPreview.classList.add('d-none');
        }

        // Clear reply data
        window.currentReplyData = null;

        // Clear sessionStorage
        const cardId = document.getElementById('viewCardModal').getAttribute('data-card-id');
        if (cardId) {
            sessionStorage.removeItem(`replyData_${cardId}`);
        }

        // Reset comment input placeholder
        const commentInput = document.getElementById('comment-input');
        if (commentInput) {
            commentInput.placeholder = 'Tulis komentar..';
        }
    }

    // Function to close reply preview (called by onclick in HTML)
    function closeReplyPreview() {
        hideGlobalReplyPreview();
    }

    // Make functions globally accessible
    window.hideGlobalReplyPreview = hideGlobalReplyPreview;
    window.closeReplyPreview = closeReplyPreview;

    // Handle reply form submission
    function handleReplySubmit(submitBtn) {
        const replyForm = submitBtn.closest('.reply-form');
        const replyInput = replyForm.querySelector('.reply-input');
        const content = replyInput.value.trim();

        if (!content) return;

        // Get target information from the form
        const targetCommentId = replyForm.dataset.targetCommentId;
        const targetReplyId = replyForm.dataset.targetReplyId || null;

        // Get reply preview data for WhatsApp-style reply
        const replyPreview = replyForm.querySelector('.reply-preview');
        let originalMessageData = null;

        if (replyPreview) {
            const authorName = replyPreview.querySelector('.reply-preview-author')?.textContent || '';
            const originalContent = replyPreview.querySelector('.reply-preview-content')?.textContent || '';

            originalMessageData = {
                author: authorName,
                content: originalContent,
                type: targetReplyId ? 'reply' : 'comment'
            };
        }

        // Disable form during submission
        replyInput.disabled = true;
        submitBtn.disabled = true;
        submitBtn.textContent = 'Mengirim..';

        // Submit reply to backend as new comment
        submitReplyAsComment(content, originalMessageData)
            .then(newComment => {
                // Add new comment to top of comments list (WhatsApp style)
                addCommentToTop(newComment);

                // Hide reply form
                hideReplyForm();

                // Show success message
                showAlert('success', 'Balasan berhasil ditambahkan!');
            })
            .catch(error => {
                console.error('Error submitting reply:', error);

                // Re-enable form
                replyInput.disabled = false;
                submitBtn.disabled = false;
                submitBtn.textContent = 'Reply';

                // Show error message
                showAlert('danger', 'Gagal menambahkan balasan.');
            });
    }

    // Handle reply form cancellation
    function handleReplyCancel(cancelBtn) {
        hideReplyForm();
    }

    // Submit reply as new comment (WhatsApp style)
    function submitReplyAsComment(content, originalMessageData = null) {
        const currentCardId = window.currentCardId;

        const requestData = {
            card_id: currentCardId,
            content: content
        };

        // Add original message data for WhatsApp-style reply
        if (originalMessageData) {
            requestData.original_message = originalMessageData;
        }

        return fetch('{{ url('/boards/comments') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify(requestData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Update comment count in the board view
                    if (data.comments_count !== undefined) {
                        window.updateCardCommentCount(currentCardId, data.comments_count);
                    }
                    return data.comment;
                } else {
                    throw new Error(data.message || 'Gagal mengirim balasan sebagai komentar.');
                }
            });
    }

    // Submit reply to backend
    function submitReply(parentCommentId, content, replyToReplyId = null, originalMessageData = null) {
        const currentCardId = window.currentCardId;

        const requestData = {
            parent_comment_id: parentCommentId,
            content: content
        };

        if (replyToReplyId) {
            requestData.reply_to_reply_id = replyToReplyId;
        }

        // Add original message data for WhatsApp-style reply
        if (originalMessageData) {
            requestData.original_message = originalMessageData;
        }

        return fetch('{{ url('/boards/comments/replies') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify(requestData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    return data.reply;
                } else {
                    throw new Error(data.message || 'Gagal mengirim balasan.');
                }
            });
    }

    // Add new comment to top of comments feed (WhatsApp style)
    function addCommentToTop(comment) {
        const commentsFeed = document.querySelector('.comments-feed');
        if (!commentsFeed) return;

        const commentElement = document.createElement('div');
        commentElement.className = 'comment-item fade-in';
        commentElement.dataset.commentId = comment.id;

        // Format time to match server-side format (DD MMM YYYY, HH:MM)
        const now = new Date();
        const timeStr = now.toLocaleDateString('en-GB', {
            day: '2-digit',
            month: 'short',
            year: 'numeric'
        }) + ', ' + now.toLocaleTimeString('en-US', {
            hour: '2-digit',
            minute: '2-digit',
            hour12: false
        });

        const userName = comment.user?.name || 'Unknown User';

        // Get user image - prioritize user.image, fall back to generated avatar
        let userImage = '';
        if (comment.user?.image) {
            userImage = `<img src="${comment.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 (comment.original_message) {
            const truncatedContent = comment.original_message.content.length > 80 ?
                comment.original_message.content.substring(0, 80) + '...' :
                comment.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>${comment.original_message.author}</strong></small>
          </div>
          <div class="original-message-text">${linkifyText(truncatedContent)}</div>
        </div>
      `;
        }

        // Check if current user is the comment author
        const currentUserId = window.currentUserId || (@json($current_user_id ?? null) ? parseInt(
            @json($current_user_id ?? null)) : null);
        const commentAuthorId = comment.user?.id || comment.user_id;
        const isCommentAuthor = currentUserId && commentAuthorId && parseInt(currentUserId) === parseInt(
            commentAuthorId);

        // Build action buttons - only show edit/delete if user is the author
        let actionButtonsHTML = `
      <button class="comment-action-btn reply-btn">
          <i class="fas fa-reply"></i> Balas
      </button>`;

        if (isCommentAuthor) {
            actionButtonsHTML += `
      <button class="comment-action-btn edit-comment-btn" data-comment-id="${comment.id}">
        <i class="fas fa-edit"></i> Ubah
      </button>
      <button class="comment-action-btn delete-comment-btn" data-comment-id="${comment.id}">
        <i class="fas fa-trash"></i> Hapus
      </button>`;
        }

        commentElement.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(comment.content)}</p>
          </div>
          <div class="comment-actions">
            ${actionButtonsHTML}
          </div>
        </div>
      </div>
    `;

        // Insert at the top of comments feed
        commentsFeed.insertBefore(commentElement, commentsFeed.firstChild);

        // Scroll to new comment
        commentElement.scrollIntoView({
            behavior: 'smooth',
            block: 'nearest'
        });

        // Restore the global filter state
        restoreFilterState();
    }

    // Add smooth scroll animation to comments feed
    function initializeScrollAnimations() {
        const commentsFeed = document.querySelector('.comments-feed');
        if (commentsFeed) {
            commentsFeed.style.scrollBehavior = 'smooth';
        }
    }

    // Add hover effects to interactive elements
    function initializeHoverEffects() {
        const commentItems = document.querySelectorAll('.comment-item, .activity-item');
        commentItems.forEach(item => {
            item.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-2px)';
            });

            item.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
            });
        });
    }

    // Make filter function globally accessible
    window.filterComments = filterComments;

    // Initialize mention system for EDIT comment textarea
    function initializeEditMentionSystem(editForm, editInput) {
        const mentionDropdown = editForm.querySelector('.edit-mention-dropdown');
        const mentionList = editForm.querySelector('.edit-mention-list');

        if (!editInput || !mentionDropdown || !mentionList) {
            console.error('Edit mention system elements not found');
            return;
        }

        let currentMentionQuery = '';
        let mentionStartPos = 0;
        let selectedIndex = -1;
        let availableUsers = [];

        // Handle input for mention detection
        editInput.addEventListener('input', function(e) {
            const text = this.value;
            const cursorPos = this.selectionStart;

            // Find @ symbol before cursor
            let mentionStart = text.lastIndexOf('@', cursorPos - 1);

            if (mentionStart !== -1 && (mentionStart === 0 || /\s/.test(text[mentionStart - 1]))) {
                const mentionText = text.substring(mentionStart + 1, cursorPos);

                // Check if we're still in mention mode (no space after @)
                if (!mentionText.includes(' ') && !mentionText.includes('\n')) {
                    currentMentionQuery = mentionText;
                    mentionStartPos = mentionStart;
                    fetchAndShowEditMentionSuggestions(mentionText);
                } else {
                    hideEditMentionDropdown();
                }
            } else {
                hideEditMentionDropdown();
            }
        });

        // Also trigger on keyup for immediate @ detection
        editInput.addEventListener('keyup', function(e) {
            if (e.key === '@') {
                const text = this.value;
                const cursorPos = this.selectionStart;
                let mentionStart = text.lastIndexOf('@', cursorPos - 1);

                if (mentionStart !== -1) {
                    currentMentionQuery = '';
                    mentionStartPos = mentionStart;
                    fetchAndShowEditMentionSuggestions('');
                }
            }
        });

        // Handle keyboard navigation
        editInput.addEventListener('keydown', function(e) {
            if (!mentionDropdown.classList.contains('d-none')) {
                if (e.key === 'ArrowDown') {
                    e.preventDefault();
                    selectedIndex = Math.min(selectedIndex + 1, availableUsers.length - 1);
                    updateEditSelection();
                } else if (e.key === 'ArrowUp') {
                    e.preventDefault();
                    selectedIndex = Math.max(selectedIndex - 1, -1);
                    updateEditSelection();
                } else if (e.key === 'Enter' && selectedIndex >= 0) {
                    e.preventDefault();
                    selectEditUser(availableUsers[selectedIndex]);
                } else if (e.key === 'Escape') {
                    hideEditMentionDropdown();
                }
            }
        });

        function fetchAndShowEditMentionSuggestions(query) {
            // Get card members from currentCardData
            const cardMembers = (currentCardData?.members || window.currentCardData?.members || []);

            if (!cardMembers || cardMembers.length === 0) {
                showEditNoUsersMessage();
                return;
            }

            // Get current user ID
            const currentUserId = window.currentUserId || (@json($current_user_id ?? null) ? parseInt(
                @json($current_user_id ?? null)) : null);

            // Filter out current user (can't mention yourself)
            let filteredUsers = cardMembers.filter(member => {
                return member.id && currentUserId && parseInt(member.id) !== parseInt(currentUserId);
            });

            // Filter card members based on search query
            if (query && query.trim() !== '') {
                const searchQuery = query.toLowerCase();
                filteredUsers = filteredUsers.filter(member => {
                    const fullName = member.name || `${member.firstname || ''} ${member.lastname || ''}`.trim();
                    const username = member.username || member.email?.split('@')[0] || '';
                    const email = member.email || '';

                    return fullName.toLowerCase().includes(searchQuery) ||
                        username.toLowerCase().includes(searchQuery) ||
                        email.toLowerCase().includes(searchQuery);
                });
            }

            // Format users for display
            availableUsers = filteredUsers.map(member => {
                const fullName = member.name || `${member.firstname || ''} ${member.lastname || ''}`.trim();
                return {
                    id: member.id,
                    name: fullName || member.username,
                    username: member.username || member.email?.split('@')[0] || 'user',
                    email: member.email,
                    image: member.image || member.avatar || '/img/default-avatar.png',
                    avatar: member.image || member.avatar || '/img/default-avatar.png'
                };
            });

            if (availableUsers.length > 0) {
                showEditMentionDropdown(availableUsers);
            } else {
                showEditNoUsersMessage();
            }
        }

        function showEditMentionDropdown(users) {
            mentionList.innerHTML = '';
            selectedIndex = -1;

            users.forEach((user, index) => {
                const userItem = document.createElement('div');
                userItem.className = 'mention-item';

                const userName = user.name || `${user.firstname || ''} ${user.lastname || ''}`.trim();
                const userImage = user.image || user.avatar || '/img/default-avatar.png';
                const username = user.username || user.email?.split('@')[0] || 'user';

                userItem.innerHTML = `
                    <div class="d-flex align-items-center p-2">
                        <img src="${userImage}" class="mention-avatar me-2" alt="${userName}" onerror="this.src='/img/default-avatar.png'" style="width: 32px; height: 32px; border-radius: 50%; object-fit: cover;">
                        <div class="mention-info flex-grow-1">
                            <div class="mention-name" style="font-weight: 600; font-size: 14px;">${userName}</div>
                            <div class="mention-username" style="font-size: 12px; color: #6c757d;">@${username}</div>
                        </div>
                    </div>
                `;

                userItem.addEventListener('click', () => selectEditUser(user));
                userItem.addEventListener('mouseenter', () => {
                    selectedIndex = index;
                    updateEditSelection();
                });

                mentionList.appendChild(userItem);
            });

            mentionDropdown.classList.remove('d-none');
        }

        function showEditNoUsersMessage() {
            mentionList.innerHTML = `
                <div class="mention-item">
                    <div class="d-flex align-items-center justify-content-center p-3 text-muted">
                        <i class="fas fa-users me-2"></i>
                        <span>Tidak ada anggota ditemukan</span>
                    </div>
                </div>
            `;
            mentionDropdown.classList.remove('d-none');
        }

        function updateEditSelection() {
            const items = mentionList.querySelectorAll('.mention-item');
            items.forEach((item, index) => {
                if (index === selectedIndex) {
                    item.classList.add('selected');
                    item.style.backgroundColor = '#f8f9fa';
                } else {
                    item.classList.remove('selected');
                    item.style.backgroundColor = '';
                }
            });
        }

        function selectEditUser(user) {
            const username = user.username || user.email?.split('@')[0] || 'user';
            const currentText = editInput.value;
            const cursorPos = editInput.selectionStart;

            // Find the end of current mention text
            let endPos = cursorPos;
            while (endPos < currentText.length && !/[\s\n]/.test(currentText[endPos])) {
                endPos++;
            }

            // Replace the @mention text
            const beforeMention = currentText.substring(0, mentionStartPos);
            const afterMention = currentText.substring(endPos);
            const newText = beforeMention + '@' + username + ' ' + afterMention;

            editInput.value = newText;

            // Set cursor position after the mention
            const newCursorPos = mentionStartPos + username.length + 2;
            editInput.setSelectionRange(newCursorPos, newCursorPos);
            editInput.focus();

            hideEditMentionDropdown();
        }

        function hideEditMentionDropdown() {
            mentionDropdown.classList.add('d-none');
            selectedIndex = -1;
            availableUsers = [];
        }

        // Close dropdown when clicking outside
        document.addEventListener('click', function(e) {
            if (!editInput.contains(e.target) && !mentionDropdown.contains(e.target)) {
                hideEditMentionDropdown();
            }
        });
    }

    // Initialize mention system
    function initializeMentionSystem() {
        const commentInput = document.getElementById('comment-input');
        const mentionDropdown = document.getElementById('mention-dropdown');
        const mentionList = document.getElementById('mention-list');

        if (!commentInput || !mentionDropdown || !mentionList) {
            console.error('Mention system elements not found');
            return;
        }

        let currentMentionQuery = '';
        let mentionStartPos = 0;
        let selectedIndex = -1;
        let availableUsers = [];

        // Handle input for mention detection
        commentInput.addEventListener('input', function(e) {
            const text = this.value;
            const cursorPos = this.selectionStart;

            // Find @ symbol before cursor
            let mentionStart = text.lastIndexOf('@', cursorPos - 1);

            if (mentionStart !== -1 && (mentionStart === 0 || /\s/.test(text[mentionStart - 1]))) {
                const mentionText = text.substring(mentionStart + 1, cursorPos);

                // Check if we're still in mention mode (no space after @)
                if (!mentionText.includes(' ') && !mentionText.includes('\n')) {
                    currentMentionQuery = mentionText;
                    mentionStartPos = mentionStart;
                    fetchAndShowMentionSuggestions(mentionText);
                } else {
                    hideMentionDropdown();
                }
            } else {
                console.log('No valid @ mention found');
                if (mentionStart !== -1) {
                    console.log('   Reason: Character before @ is not whitespace');
                }
                hideMentionDropdown();
            }
        });

        // Also trigger on keyup for immediate @ detection
        commentInput.addEventListener('keyup', function(e) {
            console.log('Keyup event:', e.key);
            if (e.key === '@') {
                const text = this.value;
                const cursorPos = this.selectionStart;
                let mentionStart = text.lastIndexOf('@', cursorPos - 1);

                if (mentionStart !== -1) {
                    currentMentionQuery = '';
                    mentionStartPos = mentionStart;
                    console.log('@ detected directly, showing all users');
                    fetchAndShowMentionSuggestions('');
                }
            }
        });

        // Handle keyboard navigation
        commentInput.addEventListener('keydown', function(e) {
            if (!mentionDropdown.classList.contains('d-none')) {
                if (e.key === 'ArrowDown') {
                    e.preventDefault();
                    selectedIndex = Math.min(selectedIndex + 1, availableUsers.length - 1);
                    updateSelection();
                } else if (e.key === 'ArrowUp') {
                    e.preventDefault();
                    selectedIndex = Math.max(selectedIndex - 1, -1);
                    updateSelection();
                } else if (e.key === 'Enter' && selectedIndex >= 0) {
                    e.preventDefault();
                    selectUser(availableUsers[selectedIndex]);
                } else if (e.key === 'Escape') {
                    hideMentionDropdown();
                }
            }
        });

        function fetchAndShowMentionSuggestions(query) {
            const currentCardId = getCurrentCardId();

            // Get card members from currentCardData
            const cardMembers = (currentCardData?.members || window.currentCardData?.members || []);

            if (!cardMembers || cardMembers.length === 0) {
                console.log('No card members available for mentions');
                showNoUsersMessage();
                return;
            }

            console.log('Card members available:', cardMembers.length);

            // Get current user ID
            const currentUserId = window.currentUserId || (@json($current_user_id ?? null) ? parseInt(
                @json($current_user_id ?? null)) : null);

            // Filter out current user (can't mention yourself)
            let filteredUsers = cardMembers.filter(member => {
                return member.id && currentUserId && parseInt(member.id) !== parseInt(currentUserId);
            });

            // Filter card members based on search query
            if (query && query.trim() !== '') {
                const searchQuery = query.toLowerCase();
                filteredUsers = filteredUsers.filter(member => {
                    const fullName = member.name || `${member.firstname || ''} ${member.lastname || ''}`.trim();
                    const username = member.username || member.email?.split('@')[0] || '';
                    const email = member.email || '';

                    return fullName.toLowerCase().includes(searchQuery) ||
                        username.toLowerCase().includes(searchQuery) ||
                        email.toLowerCase().includes(searchQuery);
                });
            }

            // Format users for display
            availableUsers = filteredUsers.map(member => {
                const fullName = member.name || `${member.firstname || ''} ${member.lastname || ''}`.trim();
                return {
                    id: member.id,
                    name: fullName || member.username,
                    username: member.username || member.email?.split('@')[0] || 'user',
                    email: member.email,
                    image: member.image || member.avatar || '/img/default-avatar.png',
                    avatar: member.image || member.avatar || '/img/default-avatar.png'
                };
            });

            if (availableUsers.length > 0) {
                showMentionDropdown(availableUsers);
            } else {
                showNoUsersMessage();
            }
        }

        function showMentionDropdown(users) {

            mentionList.innerHTML = '';
            selectedIndex = -1;

            users.forEach((user, index) => {
                const userItem = document.createElement('div');
                userItem.className = 'mention-item';

                // Create user image with fallback
                const userName = user.name || `${user.firstname || ''} ${user.lastname || ''}`.trim();
                const userImage = user.image || user.avatar || '/img/default-avatar.png';
                const username = user.username || user.email?.split('@')[0] || 'user';

                userItem.innerHTML = `
          <div class="d-flex align-items-center p-2">
            <img src="${userImage}" class="mention-avatar me-2" alt="${userName}" onerror="this.src='/img/default-avatar.png'">
            <div class="mention-info flex-grow-1">
              <div class="mention-name">${userName}</div>
              <div class="mention-username">@${username}</div>
            </div>
          </div>
        `;

                userItem.addEventListener('click', () => selectUser(user));
                userItem.addEventListener('mouseenter', () => {
                    selectedIndex = index;
                    updateSelection();
                });

                mentionList.appendChild(userItem);
            });

            // Better positioning logic
            positionMentionDropdown();

            mentionDropdown.classList.remove('d-none');
        }

        function positionMentionDropdown() {
            // Dropdown is already positioned with CSS (top: 100%, left: 0, right: 0)
            // Just ensure it has the right width to match the input
            const inputGroup = commentInput.parentElement;
            mentionDropdown.style.width = inputGroup.offsetWidth + 'px';
        }

        function showNoUsersMessage() {
            mentionList.innerHTML = `
        <div class="mention-item">
          <div class="d-flex align-items-center justify-content-center p-3 text-muted">
            <i class="fas fa-users me-2"></i>
            <span>No users found</span>
          </div>
        </div>
      `;

            // Use same positioning function
            positionMentionDropdown();

            mentionDropdown.classList.remove('d-none');
        }

        function updateSelection() {
            const items = mentionList.querySelectorAll('.mention-item');
            items.forEach((item, index) => {
                if (index === selectedIndex) {
                    item.classList.add('selected');
                } else {
                    item.classList.remove('selected');
                }
            });
        }

        function selectUser(user) {
            const username = user.username || user.email?.split('@')[0] || 'user';
            const currentText = commentInput.value;
            const cursorPos = commentInput.selectionStart;

            // Find the end of current mention text
            let endPos = cursorPos;
            while (endPos < currentText.length && !/[\s\n]/.test(currentText[endPos])) {
                endPos++;
            }

            // Replace the @mention text
            const beforeMention = currentText.substring(0, mentionStartPos);
            const afterMention = currentText.substring(endPos);
            const newText = beforeMention + '@' + username + ' ' + afterMention;

            commentInput.value = newText;

            // Set cursor position after the mention
            const newCursorPos = mentionStartPos + username.length + 2;
            commentInput.setSelectionRange(newCursorPos, newCursorPos);
            commentInput.focus();

            // Trigger resize
            commentInput.style.height = 'auto';
            commentInput.style.height = Math.min(commentInput.scrollHeight, 120) + 'px';

            hideMentionDropdown();
            console.log('User selected:', username);
        }

        function hideMentionDropdown() {
            mentionDropdown.classList.add('d-none');
            selectedIndex = -1;
            availableUsers = [];
        }

        // Close dropdown when clicking outside
        document.addEventListener('click', function(e) {
            if (!commentInput.contains(e.target) && !mentionDropdown.contains(e.target)) {
                hideMentionDropdown();
            }
        });

        // Reposition dropdown on scroll or resize
        window.addEventListener('resize', function() {
            if (!mentionDropdown.classList.contains('d-none')) {
                positionMentionDropdown();
            }
        });

        const modalBody = commentInput.closest('.modal-body');
        if (modalBody) {
            modalBody.addEventListener('scroll', function() {
                if (!mentionDropdown.classList.contains('d-none')) {
                    positionMentionDropdown();
                }
            });
        }

        // Helper functions
        function getCurrentCardId() {
            return currentCardData?.id ||
                window.currentCardId ||
                document.getElementById('viewCardModal')?.getAttribute('data-card-id') ||
                null;
        }

        function getCurrentBoardId() {
            // Try multiple sources to get board_id
            return currentCardData?.board_id ||
                window.currentCardData?.board_id ||
                document.getElementById('viewCardModal')?.getAttribute('data-board-id') ||
                document.querySelector('[data-board-id]')?.getAttribute('data-board-id') ||
                null;
        }
    }


    // Function to refresh a single comment
    function refreshComment(commentId) {
        console.log('Refreshing comment:', commentId);

        const currentCardId = window.currentCardId || document.getElementById('cardTitle')?.getAttribute(
            'data-card-id');
        if (!currentCardId) return;

        // Get comment element
        const commentElement = document.querySelector(`.comment-item[data-comment-id="${commentId}"]`);
        if (!commentElement) return;

        // Fetch latest comment data
        fetch(`{{ url('/boards/card-data') }}/${currentCardId}`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }

        }).then(response => response.json()).then(data => {
            if (data.success && data.data.comments) {
                const updatedComment = data.data.comments.find(c => c.id == commentId);

                if (updatedComment) {
                    // Update reactions in the existing comment element
                    updateCommentReactions(commentElement, updatedComment.reactions || []);
                }
            }

        }).catch(error => {
            console.error('Error refreshing comment:', error);
        });
    }

    // Initialize the complete comment system when modal opens
    document.addEventListener('DOMContentLoaded', function() {

        // Initialize all comment-related functionality
        if (typeof initializeCommentSystem === 'function') {
            initializeCommentSystem();
        }

        if (typeof initializeReplyAndReactionSystem === 'function') {
            initializeReplyAndReactionSystem();
        }

        if (typeof initializeMentionSystem === 'function') {
            initializeMentionSystem();
        }

        // Initialize reminder system
        if (typeof initializeReminderSystem === 'function') {
            initializeReminderSystem();
        }

        // Reset reply state on page load
        if (typeof hideGlobalReplyPreview === 'function') {
            hideGlobalReplyPreview();
        }

        // Initialize delete confirmation dropdowns
        const confirmDeleteCommentBtn = document.getElementById('confirmDeleteCommentBtn');
        const cancelDeleteCommentBtn = document.getElementById('cancelDeleteCommentBtn');
        const confirmDeleteReplyBtn = document.getElementById('confirmDeleteReplyBtn');
        const cancelDeleteReplyBtn = document.getElementById('cancelDeleteReplyBtn');

        if (confirmDeleteCommentBtn) {
            confirmDeleteCommentBtn.addEventListener('click', confirmDeleteComment);
        }
        if (cancelDeleteCommentBtn) {
            cancelDeleteCommentBtn.addEventListener('click', cancelDeleteComment);
        }
        if (confirmDeleteReplyBtn) {
            confirmDeleteReplyBtn.addEventListener('click', confirmDeleteReply);
        }
        if (cancelDeleteReplyBtn) {
            cancelDeleteReplyBtn.addEventListener('click', cancelDeleteReply);
        }

        // Close dropdowns when clicking outside
        document.addEventListener('click', function(e) {
            const commentDropdown = document.getElementById('confirmDeleteCommentDropdown');
            const replyDropdown = document.getElementById('confirmDeleteReplyDropdown');

            // Close comment delete dropdown if clicking outside
            if (commentDropdown && commentDropdown.style.display === 'block' &&
                !commentDropdown.contains(e.target) &&
                !e.target.closest('.delete-comment-btn')) {
                commentDropdown.style.display = 'none';

                // Destroy Popper instance
                if (window.deleteCommentPopperInstance) {
                    window.deleteCommentPopperInstance.destroy();
                    window.deleteCommentPopperInstance = null;
                }
            }

            // Close reply delete dropdown if clicking outside
            if (replyDropdown && replyDropdown.style.display === 'block' &&
                !replyDropdown.contains(e.target) &&
                !e.target.closest('.delete-reply-btn')) {
                replyDropdown.style.display = 'none';
            }
        });
    });

    // Reset reply state before page unload (refresh/close)
    window.addEventListener('beforeunload', function() {
        if (typeof hideGlobalReplyPreview === 'function') {
            hideGlobalReplyPreview();
        }

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

    document.addEventListener("DOMContentLoaded", () => {
        initializeViewMemberSelection();
        initializeViewCardDescription();
        initializeViewAttachment();
        initializeCardAutoSave();
        initializeCommentSystem();
        initializeReplyAndReactionSystem(); // Add reply and reaction system
        initializeScrollAnimations();
        initializeHoverEffects();
        initializeMentionSystem();
        initializeViewCustomField();
        initializeCommentInputBehavior(); // Initialize comment input behavior
    });

    // Initialize comment input auto-expand and button visibility
    function initializeCommentInputBehavior() {
        const commentInput = document.getElementById('comment-input');
        const actionButtons = document.getElementById('comment-action-buttons');
        const cancelBtn = document.getElementById('cancelCommentBtn');

        if (!commentInput || !actionButtons || !cancelBtn) return;

        // Auto-expand textarea based on content
        function autoExpandTextarea() {
            commentInput.style.height = 'auto';
            commentInput.style.height = Math.min(commentInput.scrollHeight, 150) + 'px';
        }

        // Show buttons when textarea is focused or has content
        commentInput.addEventListener('focus', function() {
            actionButtons.classList.remove('d-none');
        });

        // Auto-expand on input
        commentInput.addEventListener('input', function() {
            autoExpandTextarea();
        });

        // Cancel button - hide buttons and reset textarea
        cancelBtn.addEventListener('click', function() {
            commentInput.value = '';
            commentInput.style.height = 'auto';
            actionButtons.classList.add('d-none');

            // Also hide reply preview if active
            if (typeof hideGlobalReplyPreview === 'function') {
                hideGlobalReplyPreview();
            }
        });

        // Also hide buttons when clicking outside (optional - comment out if not needed)
        document.addEventListener('click', function(e) {
            // Don't hide if clicking on reply buttons
            if (e.target.closest('.reply-btn') || e.target.closest('.reply-to-reply-btn')) {
                return;
            }

            const wrapper = document.querySelector('.comment-input-wrapper');
            if (wrapper && !wrapper.contains(e.target) && !commentInput.value.trim()) {
                actionButtons.classList.add('d-none');
                commentInput.style.height = 'auto';
            }
        });
    }

    // ==================== Trello-Style Preview Modal ====================
    (function() {
        let currentImageUrl = '';
        let currentImageName = '';
        let currentImageMeta = '';
        let isZoomed = false;

        // Pan/Drag state
        let isDragging = false;
        let startX = 0;
        let startY = 0;
        let translateX = 0;
        let translateY = 0;

        // DOM Elements
        const previewModal = document.getElementById('previewModal');
        const previewImg = document.getElementById('previewModalImg');
        const downloadBtn = document.getElementById('downloadBtn');
        const closePreviewBtn = document.getElementById('closePreviewBtn');
        const previewFilename = document.getElementById('previewFilename');
        const previewMeta = document.getElementById('previewMeta');
        const openNewTabBtn = document.getElementById('openNewTabBtn');
        const previewBottomBar = document.getElementById('previewBottomBar');

        // Show/Hide UI elements
        function showPreviewUI() {
            if (previewBottomBar) previewBottomBar.style.display = 'flex';
            if (closePreviewBtn) closePreviewBtn.style.display = 'flex';
        }

        function hidePreviewUI() {
            if (previewBottomBar) previewBottomBar.style.display = 'none';
            if (closePreviewBtn) closePreviewBtn.style.display = 'none';
        }

        // Initialize when modal is shown
        if (previewModal) {
            previewModal.addEventListener('shown.bs.modal', function() {
                resetZoom();
                showPreviewUI();
                document.body.style.overflow = 'hidden';
            });

            previewModal.addEventListener('hidden.bs.modal', function() {
                resetZoom();
                hidePreviewUI();
                document.body.style.overflow = '';
                currentImageUrl = '';
                currentImageName = '';
            });

            // Click on modal body (outside image) to close
            const modalBody = previewModal.querySelector('.modal-body');
            if (modalBody) {
                modalBody.addEventListener('click', function(e) {
                    if (e.target === modalBody || e.target.classList.contains('file-container')) {
                        closePreviewModal();
                    }
                });
            }
        }

        // Close modal function
        function closePreviewModal() {
            const modal = bootstrap.Modal.getInstance(previewModal);
            if (modal) {
                modal.hide();
            }
        }

        // Close button
        if (closePreviewBtn) {
            closePreviewBtn.addEventListener('click', function(e) {
                e.stopPropagation();
                closePreviewModal();
            });
        }

        // Toggle zoom on image click (Trello style) - WITH PAN/DRAG
        function toggleZoom() {
            if (!previewImg) return;
            isZoomed = !isZoomed;

            if (isZoomed) {
                previewImg.classList.add('zoomed');
                previewImg.style.cursor = 'grab';
                // Apply zoom transform immediately
                updateImageTransform();
            } else {
                previewImg.classList.remove('zoomed');
                previewImg.style.cursor = 'zoom-in';
                // Reset pan position when zoom out
                translateX = 0;
                translateY = 0;
                updateImageTransform();
            }
        }

        function resetZoom() {
            isZoomed = false;
            isDragging = false;
            translateX = 0;
            translateY = 0;
            if (previewImg) {
                previewImg.classList.remove('zoomed');
                previewImg.style.cursor = 'zoom-in';
                previewImg.style.transform = 'scale(1) translate(0, 0)';
            }
        }

        function updateImageTransform() {
            if (!previewImg) return;
            const scale = isZoomed ? 1.5 : 1;
            previewImg.style.transform = `scale(${scale}) translate(${translateX}px, ${translateY}px)`;
        }

        // Click image to toggle zoom (not when dragging)
        if (previewImg) {
            let clickStartX = 0;
            let clickStartY = 0;
            let hasMoved = false;

            previewImg.addEventListener('mousedown', function(e) {
                if (!isZoomed) return;
                e.preventDefault();
                e.stopPropagation();

                isDragging = true;
                hasMoved = false;
                clickStartX = e.clientX;
                clickStartY = e.clientY;
                startX = e.clientX - translateX;
                startY = e.clientY - translateY;
                previewImg.style.cursor = 'grabbing';
            });

            previewImg.addEventListener('mousemove', function(e) {
                if (!isDragging || !isZoomed) return;
                e.preventDefault();

                const moveX = Math.abs(e.clientX - clickStartX);
                const moveY = Math.abs(e.clientY - clickStartY);

                if (moveX > 5 || moveY > 5) {
                    hasMoved = true;
                }

                translateX = e.clientX - startX;
                translateY = e.clientY - startY;
                updateImageTransform();
            });

            previewImg.addEventListener('mouseup', function(e) {
                if (!isZoomed) {
                    // Toggle zoom on click when not zoomed
                    toggleZoom();
                    return;
                }

                if (isDragging) {
                    isDragging = false;
                    previewImg.style.cursor = 'grab';

                    // If no movement, treat as click to zoom out
                    if (!hasMoved) {
                        toggleZoom();
                    }
                }
            });

            previewImg.addEventListener('mouseleave', function() {
                if (isDragging) {
                    isDragging = false;
                    if (isZoomed) {
                        previewImg.style.cursor = 'grab';
                    }
                }
            });

            // Click to toggle zoom
            previewImg.addEventListener('click', function(e) {
                e.stopPropagation();
                // Click handler is now in mouseup to handle drag vs click
            });
        }

        // Download function
        function downloadImage() {
            if (!currentImageUrl) return;
            const link = document.createElement('a');
            link.href = currentImageUrl;
            link.download = currentImageName || 'download';
            link.target = '_blank';
            if (currentImageUrl.startsWith('http') && !currentImageUrl.includes(window.location.origin)) {
                window.open(currentImageUrl, '_blank');
                return;
            }
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }

        if (downloadBtn) {
            downloadBtn.addEventListener('click', function(e) {
                e.stopPropagation();
                downloadImage();
            });
        }

        // Open in new tab
        if (openNewTabBtn) {
            openNewTabBtn.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                if (currentImageUrl) {
                    window.open(currentImageUrl, '_blank');
                }
            });
        }

        // Keyboard shortcuts
        document.addEventListener('keydown', function(e) {
            if (!previewModal || !previewModal.classList.contains('show')) return;
            if (e.key === 'Escape') {
                e.preventDefault();
                closePreviewModal();
            }
        });

        // Global function to set preview data
        window.setPreviewData = function(imageUrl, imageName, meta) {
            currentImageUrl = imageUrl;
            currentImageName = imageName || 'image';
            currentImageMeta = meta || '';
            if (previewFilename) previewFilename.textContent = currentImageName;
            if (previewMeta) previewMeta.textContent = currentImageMeta;
            if (openNewTabBtn) openNewTabBtn.href = currentImageUrl;
            resetZoom();
        };

        // Make functions globally accessible
        window.closePreviewModal = closePreviewModal;
        window.previewModalDownload = downloadImage;
    })();
</script>
{{-- ECharts Library for Intern Task Status Chart --}}
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
{{-- Intern Tasks Management Script (MIS Feature) --}}
<script>
    (function() {
        // Intern Tasks Management
        let currentCardId = null;
        let currentBoardId = null;
        let isMisBoard = false;
        let internTasks = [];
        let filteredTasks = []; // Filtered tasks for search & status filter
        let internTaskModal = null;
        let internTasksChart = null; // ECharts instance

        // Pagination variables
        let currentPage = 1;
        const itemsPerPage = 5; // Tampilkan 5 tugas per halaman
        let searchTerm = ''; // Search term
        let statusFilter = ''; // Status filter value

        // Initialize intern task modal and search input
        document.addEventListener('DOMContentLoaded', function() {
            const modalElement = document.getElementById('internTaskModal');
            if (modalElement) {
                internTaskModal = new bootstrap.Modal(modalElement);
            }

            // Search input event listener
            const searchInput = document.getElementById('internTaskSearch');
            if (searchInput) {
                searchInput.addEventListener('input', function(e) {
                    searchTerm = e.target.value.toLowerCase().trim();
                    currentPage = 1; // Reset to page 1 when searching
                    filterAndRenderTasks();
                });
            }

            // Status filter event listener
            const statusFilterSelect = document.getElementById('internTaskFilterStatus');
            if (statusFilterSelect) {
                statusFilterSelect.addEventListener('change', function(e) {
                    statusFilter = e.target.value;
                    currentPage = 1; // Reset to page 1 when filtering
                    filterAndRenderTasks();
                });
            }
        });

        // Filter tasks based on search term and status filter
        function filterAndRenderTasks() {
            filteredTasks = [...internTasks];

            // Apply status filter
            if (statusFilter !== '') {
                filteredTasks = filteredTasks.filter(task => task.status === statusFilter);
            }

            // Apply search filter
            if (searchTerm !== '') {
                filteredTasks = filteredTasks.filter(task => {
                    const website = (task.website || '').toLowerCase();
                    const uraian = (task.uraian || '').toLowerCase();
                    const status = (task.status || '').toLowerCase();
                    const catatan = (task.catatan || '').toLowerCase();
                    return website.includes(searchTerm) ||
                        uraian.includes(searchTerm) ||
                        status.includes(searchTerm) ||
                        catatan.includes(searchTerm);
                });
            }
            renderInternTasksTable();
            renderInternTasksChart();
        }

        // Render Intern Tasks Status Chart (ECharts pie chart)
        function renderInternTasksChart() {
            const chartContainer = document.getElementById('internTasksChartContainer');
            const chartDom = document.getElementById('internTasksChart');
            if (!chartContainer || !chartDom) return;

            // Always use ALL tasks (not filtered) for the chart
            if (internTasks.length === 0) {
                chartContainer.style.display = 'none';
                if (internTasksChart) {
                    internTasksChart.dispose();
                    internTasksChart = null;
                }
                return;
            }

            chartContainer.style.display = 'block';

            // Count tasks per status
            const statusCounts = {
                'Belum Mulai': 0,
                'Sedang Dikerjakan': 0,
                'Selesai': 0,
                'Tertunda': 0
            };
            internTasks.forEach(task => {
                if (statusCounts.hasOwnProperty(task.status)) {
                    statusCounts[task.status]++;
                }
            });

            const statusColors = {
                'Belum Mulai': '#6c757d',
                'Sedang Dikerjakan': '#0d6efd',
                'Selesai': '#198754',
                'Tertunda': '#ffc107'
            };

            const chartData = Object.entries(statusCounts)
                .filter(([, count]) => count > 0)
                .map(([name, value]) => ({
                    name: name,
                    value: value,
                    itemStyle: {
                        color: statusColors[name] || '#999'
                    }
                }));

            // Initialize or reuse chart instance
            if (typeof echarts === 'undefined') {
                chartContainer.style.display = 'none';
                return;
            }

            if (!internTasksChart || internTasksChart.isDisposed()) {
                internTasksChart = echarts.init(chartDom);
            }

            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c} tugas ({d}%)'
                },
                legend: {
                    orient: 'horizontal',
                    bottom: 0,
                    left: 'center',
                    textStyle: {
                        fontSize: 11
                    }
                },
                series: [{
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['50%', '45%'],
                    avoidLabelOverlap: true,
                    itemStyle: {
                        borderRadius: 6,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: true,
                        formatter: '{c}',
                        fontSize: 12,
                        fontWeight: 'bold'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 14,
                            fontWeight: 'bold'
                        }
                    },
                    data: chartData
                }]
            };

            internTasksChart.setOption(option, true);

            // Resize chart on window resize
            window.addEventListener('resize', function() {
                if (internTasksChart && !internTasksChart.isDisposed()) {
                    internTasksChart.resize();
                }
            });
        }

        // Show Intern Tasks section when card is loaded (only if MIS enabled)
        window.showInternTasksSection = function(cardId, boardId, enableMis, isAdmin) {
            const section = document.getElementById('internTasksSection');
            if (!section) {
                console.log('MIS: Section not found');
                return;
            }

            // Convert to boolean (handle 0, 1, "0", "1", true, false)
            const isMisEnabled = enableMis === true || enableMis === 1 || enableMis === "1";
            isMisBoard = isMisEnabled;

            console.log('MIS Debug:', {
                cardId,
                boardId,
                enableMis,
                isMisEnabled
            });

            // Change deadline labels for MIS boards
            const deadlineLabel = document.getElementById('deadlineLabel');

            if (isMisEnabled) {
                // MIS board: Change deadline label to "Selesai Magang"
                if (deadlineLabel) deadlineLabel.textContent = 'Deadline';
            } else {
                // Normal board: Reset to "Deadline"
                if (deadlineLabel) deadlineLabel.textContent = 'Deadline';
            }

            // Only show intern tasks section if MIS is enabled for this board
            if (!isMisEnabled) {
                section.style.display = 'none';
                return;
            }

            currentCardId = cardId;
            currentBoardId = boardId;
            section.style.display = 'block';

            // Reset filters
            statusFilter = '';
            const statusFilterSelect = document.getElementById('internTaskFilterStatus');
            if (statusFilterSelect) statusFilterSelect.value = '';

            loadInternTasks(cardId);
        };

        // Hide Intern Tasks section
        window.hideInternTasksSection = function() {
            const section = document.getElementById('internTasksSection');
            if (section) {
                section.style.display = 'none';
            }
            currentCardId = null;
            isMisBoard = false;
            internTasks = [];
            // Dispose ECharts instance
            if (internTasksChart && !internTasksChart.isDisposed()) {
                internTasksChart.dispose();
                internTasksChart = null;
            }
            const chartContainer = document.getElementById('internTasksChartContainer');
            if (chartContainer) chartContainer.style.display = 'none';
        };

        // Load tasks from server
        function loadInternTasks(cardId) {
            currentPage = 1; // Reset pagination
            searchTerm = ''; // Reset search
            const searchInput = document.getElementById('internTaskSearch');
            if (searchInput) searchInput.value = '';

            fetch(`{{ url('/cards') }}/${cardId}/intern-tasks`, {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute(
                            'content') || ''
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        internTasks = data.tasks || [];
                        filterAndRenderTasks(); // Use filter function
                    } else {
                        console.error('Error loading tasks:', data.message);
                    }
                })
                .catch(error => {
                    console.error('Error loading intern tasks:', error);
                });
        }

        // Render tasks table with pagination
        function renderInternTasksTable() {
            const tableContainer = document.getElementById('internTasksTableContainer');
            const noTasksMessage = document.getElementById('noInternTasksMessage');
            const tableBody = document.getElementById('internTasksTableBody');
            const pagination = document.getElementById('internTasksPagination');
            const paginationNav = document.getElementById('internTasksPaginationNav');
            const taskInfo = document.getElementById('internTasksInfo');

            if (!tableContainer || !noTasksMessage || !tableBody) return;

            // Use filteredTasks for display (supports search & status filter)
            if (filteredTasks.length === 0) {
                tableContainer.style.display = 'none';
                noTasksMessage.style.display = 'block';
                if (searchTerm || statusFilter) {
                    noTasksMessage.textContent = 'Tidak ada tugas yang cocok dengan filter/pencarian.';
                } else {
                    noTasksMessage.textContent = 'Belum ada tugas. Klik "Tambah Tugas" untuk menambahkan.';
                }
                if (pagination) pagination.style.display = 'none';
                return;
            }

            tableContainer.style.display = 'block';
            noTasksMessage.style.display = 'none';

            // Calculate pagination using filteredTasks
            const totalTasks = filteredTasks.length;
            const totalPages = Math.ceil(totalTasks / itemsPerPage);

            // Reset to page 1 if current page exceeds total
            if (currentPage > totalPages) currentPage = 1;

            const startIndex = (currentPage - 1) * itemsPerPage;
            const endIndex = Math.min(startIndex + itemsPerPage, totalTasks);
            const tasksToShow = filteredTasks.slice(startIndex, endIndex);

            tableBody.innerHTML = tasksToShow.map(task => {
                const statusClass = getStatusBadgeClass(task.status);
                const deadlineFormatted = task.deadline ? formatDate(task.deadline) : '-';
                const deadlineClass = isOverdue(task.deadline, task.status) ? 'text-danger fw-bold' : '';

                return `
                    <tr data-task-id="${task.id}">
                        <td class="align-middle">
                            <span class="task-website" title="${escapeHtml(task.website || '-')}">${escapeHtml(task.website || '-')}</span>
                        </td>
                        <td class="align-middle">
                            <span class="task-uraian small" title="${escapeHtml(task.uraian || '-')}">${escapeHtml(truncateText(task.uraian || '-', 50))}</span>
                        </td>
                        <td class="align-middle ${deadlineClass}">
                            <small>${deadlineFormatted}</small>
                        </td>
                        <td class="align-middle">
                            <select class="form-select form-select-sm task-status-select" onchange="updateTaskStatus(${task.id}, this.value)">
                                <option value="Belum Mulai" ${task.status === 'Belum Mulai' ? 'selected' : ''}>Belum Mulai</option>
                                <option value="Sedang Dikerjakan" ${task.status === 'Sedang Dikerjakan' ? 'selected' : ''}>Sedang Dikerjakan</option>
                                <option value="Selesai" ${task.status === 'Selesai' ? 'selected' : ''}>Selesai</option>
                                <option value="Tertunda" ${task.status === 'Tertunda' ? 'selected' : ''}>Tertunda</option>
                            </select>
                        </td>
                        <td class="align-middle">
                            <span class="task-catatan small" title="${escapeHtml(task.catatan || '-')}">${escapeHtml(truncateText(task.catatan || '-', 20))}</span>
                        </td>
                        <td class="align-middle text-center">
                            <div class="btn-group btn-group-sm">
                                <button class="btn btn-outline-primary btn-sm" onclick="editInternTask(${task.id})" title="Edit">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="btn btn-outline-danger btn-sm" onclick="deleteInternTask(${task.id})" title="Hapus">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                `;
            }).join('');

            // Show pagination only if more than 1 page
            // Show pagination only if more than 1 page
            // Show pagination
            if (pagination) {
                // tetap tampilkan info walaupun cuma 1 page
                pagination.classList.remove('d-none');
                pagination.classList.add('d-flex');

                if (taskInfo) {
                    taskInfo.textContent = `Menampilkan ${startIndex + 1}-${endIndex} dari ${totalTasks} tugas`;
                }

                if (paginationNav) {
                    let paginationHtml = '';

                    // Kalau cuma 1 page, tombolnya kosong
                    if (totalPages <= 1) {
                        paginationNav.innerHTML = '';
                    } else {
                        paginationHtml += `
                <li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
                    <a class="page-link" href="#" onclick="goToTaskPage(${currentPage - 1}); return false;">&laquo;</a>
                </li>
            `;

                        let startPage = Math.max(1, currentPage - 2);
                        let endPage = Math.min(totalPages, startPage + 4);

                        if (endPage - startPage < 4) {
                            startPage = Math.max(1, endPage - 4);
                        }

                        for (let i = startPage; i <= endPage; i++) {
                            paginationHtml += `
                    <li class="page-item ${i === currentPage ? 'active' : ''}">
                        <a class="page-link" href="#" onclick="goToTaskPage(${i}); return false;">${i}</a>
                    </li>
                `;
                        }

                        paginationHtml += `
                <li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
                    <a class="page-link" href="#" onclick="goToTaskPage(${currentPage + 1}); return false;">&raquo;</a>
                </li>
            `;

                        paginationNav.innerHTML = paginationHtml;
                    }
                }
            }
        }

        // Pagination navigation function
        window.goToTaskPage = function(page) {
            const totalPages = Math.ceil(filteredTasks.length / itemsPerPage);

            if (page < 1 || page > totalPages) {
                return;
            }

            currentPage = page;
            renderInternTasksTable();
        };

        // Status badge class
        function getStatusBadgeClass(status) {
            switch (status) {
                case 'Selesai':
                    return 'bg-success';
                case 'Sedang Dikerjakan':
                    return 'bg-warning text-dark';
                case 'Tertunda':
                    return 'bg-danger';
                default:
                    return 'bg-secondary';
            }
        }

        // Check if task is overdue
        function isOverdue(deadline, status) {
            if (!deadline || status === 'Selesai') return false;
            const today = new Date();
            today.setHours(0, 0, 0, 0);
            const dueDate = new Date(deadline);
            return dueDate < today;
        }

        // Format date to DD/MM/YYYY
        function formatDate(dateString) {
            if (!dateString) return '-';
            const date = new Date(dateString);
            const day = String(date.getDate()).padStart(2, '0');
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const year = date.getFullYear();
            return `${day}/${month}/${year}`;
        }

        // Truncate text
        function truncateText(text, maxLength) {
            if (!text || text.length <= maxLength) return text;
            return text.substring(0, maxLength) + '...';
        }

        // Escape HTML
        function escapeHtml(text) {
            if (!text) return '';
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

        // Add task button click
        document.getElementById('addInternTaskBtn')?.addEventListener('click', function() {
            openInternTaskModal();
        });

        // Open modal for add/edit
        function openInternTaskModal(taskId = null) {
            const modalTitle = document.getElementById('internTaskModalTitle');
            const form = document.getElementById('internTaskForm');

            // Reset form
            form?.reset();
            document.getElementById('internTaskId').value = '';
            document.getElementById('internTaskCardId').value = currentCardId;

            if (taskId) {
                // Edit mode
                const task = internTasks.find(t => t.id === taskId);
                if (task) {
                    modalTitle.textContent = 'Edit Tugas Intern';
                    document.getElementById('internTaskId').value = task.id;
                    document.getElementById('internTaskWebsite').value = task.website || '';
                    document.getElementById('internTaskUraian').value = task.uraian || '';
                    // Format deadline to YYYY-MM-DD for date input
                    let deadlineValue = '';
                    if (task.deadline) {
                        const d = new Date(task.deadline);
                        if (!isNaN(d.getTime())) {
                            deadlineValue = d.getFullYear() + '-' +
                                String(d.getMonth() + 1).padStart(2, '0') + '-' +
                                String(d.getDate()).padStart(2, '0');
                        }
                    }
                    document.getElementById('internTaskDeadline').value = deadlineValue;
                    document.getElementById('internTaskStatus').value = task.status || 'Belum Mulai';
                    document.getElementById('internTaskCatatan').value = task.catatan || '';
                }
            } else {
                modalTitle.textContent = 'Tambah Tugas';
            }

            internTaskModal?.show();
        }

        // Edit task
        window.editInternTask = function(taskId) {
            openInternTaskModal(taskId);
        };

        // Delete task
        window.deleteInternTask = function(taskId) {
            if (!confirm('Apakah Anda yakin ingin menghapus tugas ini?')) return;

            fetch(`{{ url('/intern-tasks') }}/${taskId}`, {
                    method: 'DELETE',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute(
                            'content') || ''
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        internTasks = internTasks.filter(t => t.id !== taskId);
                        filterAndRenderTasks(); // Re-filter and render
                        showToast('Tugas berhasil dihapus', 'success');
                    } else {
                        showToast('Gagal menghapus tugas: ' + data.message, 'error');
                    }
                })
                .catch(error => {
                    console.error('Error deleting task:', error);
                    showToast('Error menghapus tugas', 'error');
                });
        };

        // Update task status directly from table
        window.updateTaskStatus = function(taskId, newStatus) {
            fetch(`{{ url('/intern-tasks') }}/${taskId}`, {
                    method: 'PUT',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute(
                            'content') || ''
                    },
                    body: JSON.stringify({
                        status: newStatus
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Update local data
                        const task = internTasks.find(t => t.id === taskId);
                        if (task) task.status = newStatus;
                        filterAndRenderTasks(); // Re-filter and render
                        showToast('Status berhasil diperbarui', 'success');
                    } else {
                        showToast('Gagal memperbarui status: ' + data.message, 'error');
                        loadInternTasks(currentCardId); // Reload on error
                    }
                })
                .catch(error => {
                    console.error('Error updating status:', error);
                    showToast('Error memperbarui status', 'error');
                    loadInternTasks(currentCardId);
                });
        };

        // Save task button
        document.getElementById('saveInternTaskBtn')?.addEventListener('click', function() {
            const btn = this;
            const btnText = btn.querySelector('.btn-text');
            const btnLoading = btn.querySelector('.btn-loading');

            const taskId = document.getElementById('internTaskId').value;
            const cardId = document.getElementById('internTaskCardId').value || currentCardId;

            const taskData = {
                card_id: cardId,
                board_id: currentBoardId,
                website: document.getElementById('internTaskWebsite').value,
                uraian: document.getElementById('internTaskUraian').value,
                deadline: document.getElementById('internTaskDeadline').value || null,
                status: document.getElementById('internTaskStatus').value,
                catatan: document.getElementById('internTaskCatatan').value
            };

            // Validate required fields
            if (!cardId || !currentBoardId) {
                showToast('Error: Card ID atau Board ID tidak ditemukan', 'error');
                return;
            }

            // Show loading
            btnText.classList.add('d-none');
            btnLoading.classList.remove('d-none');
            btn.disabled = true;

            const url = taskId ? `{{ url('/intern-tasks') }}/${taskId}` : '{{ url('/intern-tasks') }}';
            const method = taskId ? 'PUT' : 'POST';

            fetch(url, {
                    method: method,
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute(
                            'content') || ''
                    },
                    body: JSON.stringify(taskData)
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        internTaskModal?.hide();
                        loadInternTasks(currentCardId);
                        showToast(taskId ? 'Tugas berhasil diperbarui' : 'Tugas berhasil ditambahkan',
                            'success');
                    } else {
                        showToast('Gagal menyimpan tugas: ' + data.message, 'error');
                    }
                })
                .catch(error => {
                    console.error('Error saving task:', error);
                    showToast('Error menyimpan tugas', 'error');
                })
                .finally(() => {
                    btnText.classList.remove('d-none');
                    btnLoading.classList.add('d-none');
                    btn.disabled = false;
                });
        });

        // Toast notification helper
        function showToast(message, type = 'info') {
            // Use showAlert from kanban-alert component (available globally)
            if (typeof window.showAlert === 'function') {
                const alertType = type === 'error' ? 'danger' : type;
                window.showAlert(alertType, message);
                return;
            }

            // Check if there's an existing toast function in the page
            if (typeof window.showToastNotification === 'function') {
                window.showToastNotification(message, type);
                return;
            }

            // Fallback - use browser alert for important messages
            if (type === 'success') {
                alert('✅ ' + message);
            } else if (type === 'error' || type === 'danger') {
                alert('❌ ' + message);
            }
        }

        // Hook into card modal close event to cleanup
        const viewCardModal = document.getElementById('viewCardModal');
        if (viewCardModal) {
            viewCardModal.addEventListener('hidden.bs.modal', function(e) {
                // Only react if the viewCardModal itself was hidden, not a nested modal
                if (e.target === viewCardModal) {
                    hideInternTasksSection();
                }
            });
        }

        // Prevent internTaskModal dismiss from closing viewCardModal
        const internTaskModalEl = document.getElementById('internTaskModal');
        if (internTaskModalEl) {
            internTaskModalEl.addEventListener('hidden.bs.modal', function(e) {
                e.stopPropagation();
                // Re-ensure viewCardModal body class stays
                document.body.classList.add('modal-open');
            });
        }
    })();
</script>