{{-- Create Card Modal --}}
<div class="modal fade" id="createCardModal" tabindex="-1" aria-labelledby="createCardModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-primary justify-content-center position-relative">
                <h5 class="modal-title fw-bold text-white" id="createCardModalLabel">
                    Membuat Card
                </h5>
                <button type="button" class="btn-close text-white position-absolute" style="right: 16px;"
                    data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" style="max-height: 70vh; overflow-y: auto; padding-bottom: 16px;">
                <div class="mb-4">
                    <label class="fw-bold mb-2">Judul card <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="cardTitleInput"
                        placeholder="Masukkan judul card di sini...">
                </div>
                <div class="mb-4">
                    <label class="fw-bold mb-2">
                        @if (isset($board) && $board->enable_mis)
                            Selesai Magang
                        @else
                            Deadline
                        @endif
                        <span class="text-danger">*</span>
                    </label>
                    <input type="date" class="form-control" id="cardDueDateInput">
                </div>
                <div class="mb-4">
                    <label class="fw-bold mb-2">Deskripsi <span class="text-danger">*</span></label>
                    <textarea class="form-control" rows="3" id="cardDescriptionInput"></textarea>
                </div>
                <div class="mb-4">
                    <label class="fw-bold mb-2">Warna card</label>
                    <div class="card-color-picker" id="createCardColorPicker">
                        <button type="button" class="card-color-swatch task-card-white" data-color="task-card-white"
                            title="Putih"></button>
                        <button type="button" class="card-color-swatch task-card-pastel-1"
                            data-color="task-card-pastel-1" title="Pastel 1"></button>
                        <button type="button" class="card-color-swatch task-card-pastel-2"
                            data-color="task-card-pastel-2" title="Pastel 2"></button>
                        <button type="button" class="card-color-swatch task-card-pastel-3"
                            data-color="task-card-pastel-3" title="Pastel 3"></button>
                        <button type="button" class="card-color-swatch task-card-pastel-4"
                            data-color="task-card-pastel-4" title="Pastel 4"></button>
                        <button type="button" class="card-color-swatch task-card-pastel-5"
                            data-color="task-card-pastel-5" title="Pastel 5"></button>
                        <button type="button" class="card-color-swatch task-card-pastel-6"
                            data-color="task-card-pastel-6" title="Pastel 6"></button>
                    </div>
                    <input type="hidden" id="cardColorInput" value="task-card-white">
                </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="custom-field-dropdown">
                            <button type="button" class="btn btn-outline-primary btn-sm dropdown-toggle"
                                id="cardCustomFieldDropdownBtn" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fas fa-plus me-1"></i> Tambah
                            </button>
                            <div class="dropdown-menu py-0" aria-labelledby="cardCustomFieldDropdownBtn"
                                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>
                                        <input type="text" class="form-control" id="cardCustomFieldName"
                                            placeholder="Add a field name..">
                                    </div>
                                    <div class="mb-3">
                                        <h6 class="dropdown-label text-dark mb-2">Tipe field</h6>
                                        <select class="form-select" id="cardCustomFieldType">
                                            <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="cardCreateCustomField">Buat</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="cardCustomFieldsContainer"></div>

                    {{-- Edit Custom Field Dropdown --}}
                    <div id="cardEditCustomFieldDropdown" class="dropdown-menu py-0"
                        style="width: 350px; display: none;">
                        <div class="dropdown-header text-center">
                            <h5 class="dropdown-title fw-bold mt-2">Ubah Field Kustom</h5>
                        </div>
                        <div class="dropdown-content pb-0 p-3">
                            <div class="mb-3">
                                <h6 class="dropdown-label text-dark mb-2">Nama field</h6>
                                <input type="text" class="form-control" id="cardEditCustomFieldName"
                                    placeholder="Enter field name">
                            </div>
                            <div class="mb-3">
                                <h6 class="dropdown-label text-dark mb-2">Tipe field</h6>
                                <select class="form-select" id="cardEditCustomFieldType">
                                    <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="cardCancelEditCustomFieldBtn">Batal</button>
                                <button type="button" class="btn btn-primary btn-sm"
                                    id="cardSaveEditCustomFieldBtn">Simpan</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="attachment-dropdown">
                            <button type="button" class="btn btn-outline-primary btn-sm mt-3 dropdown-toggle"
                                id="cardAttachmentsDropdownBtn" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fas fa-paperclip me-1"></i> Tambah
                            </button>
                            <div class="dropdown-menu py-0" aria-labelledby="cardAttachmentsDropdownBtn"
                                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="customCardAttachmentInput">
                                        <button type="button" class="btn btn-outline-primary btn-sm w-100 mb-0"
                                            id="customChooseFileBtn">Pilih file</button>
                                    </div>
                                    <div class="mb-3">
                                        <h6 class="dropdown-label text-dark mb-2">Tempel tautan</h6>
                                        <input type="text" class="form-control" id="cardLinkInput"
                                            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="displayInput"
                                            placeholder="Text to display">
                                    </div>
                                    <div class="d-flex justify-content-end mt-3">
                                        <button type="button" class="btn btn-primary btn-sm">Masukkan</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="attachmentsContainer"></div>
                    {{-- Edit links dropdown --}}
                    <div id="editLinkDropdown" 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="editCardLinkInput"
                                    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="editDisplayInput"
                                    placeholder="Teks untuk ditampilkan">
                            </div>
                            <div class="d-flex justify-content-end mt-3">
                                <button type="button" class="btn btn-primary btn-sm"
                                    id="saveEditLinkBtn">Simpan</button>
                                <button type="button" class="btn btn-secondary btn-sm ms-2"
                                    id="cancelEditLinkBtn">Batal</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 card</label>
                        <div class="member-dropdown">
                            <button type="button" class="btn btn-outline-primary btn-sm mt-3 dropdown-toggle"
                                id="cardMembersDropdownBtn" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fas fa-user-plus me-1"></i> Tambah
                            </button>
                            <div class="dropdown-menu py-0" aria-labelledby="cardMembersDropdownBtn"
                                style="width: 350px;" 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="cardMemberSearch"
                                            placeholder="Cari anggota..">
                                    </div>
                                    <div class="mb-3">
                                        <h6 class="dropdown-label text-dark mb-2">Anggota yang dipilih</h6>
                                        <div id="cardBoardMembers" 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="cardAvailableUsers" style="max-height: 200px; overflow-y: auto;">
                                            <p class="dropdown-label text-muted mb-0 text-center py-2">Memuat
                                                anggota..</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div id="cardMembersContainer"></div>
                    </div>
                    <input type="hidden" id="cardSelectedMemberIds" name="view_card_member_ids" value="">
                </div>
                <!-- Buat Card Button -->
                <div class="mt-4">
                    <button type="button" class="btn bg-primary text-white w-100 fw-bold" id="createCardBtn"
                        onclick="createCard()">
                        <i class="fas fa-check me-1"></i> Buat card
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

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

<style>
    :root {
        --gray-900: #212529;
        --gray-800: #32325d;
        --gray-700: #525f7f;
        --gray-600: #6c757d;
        --gray-500: #adb5bd;
        --gray-400: #ced4da;
        --gray-300: #e3e3e3;
        --gray-200: #e9ecef;
        --gray-100: #f6f9fc;

        --primary: #1e8c94;
        --primary-dark: #1c747a;

        --link: #0056b3;
    }

    /* Standardized styling for Create Card Modal */
    #createCardModal .form-control {
        border-radius: 6px;
    }

    #createCardModal .btn {
        border-radius: 6px;
    }

    .card-color-picker {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .card-color-swatch {
        width: 100%;
        height: 38px;
        border: 2px solid #d4d9e1;
        border-radius: 8px;
        cursor: pointer;
        transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .card-color-swatch:hover {
        transform: translateY(-1px);
    }

    .card-color-swatch.selected {
        border-color: #1e8c94;
        box-shadow: 0 0 0 2px rgba(30, 140, 148, 0.2);
    }

    .card-color-swatch.task-card-white {
        background: #ffffff;
    }

    .card-color-swatch.task-card-pastel-1 {
        background: #fff4e6;
    }

    .card-color-swatch.task-card-pastel-2 {
        background: #fef7cd;
    }

    .card-color-swatch.task-card-pastel-3 {
        background: #e6f4ea;
    }

    .card-color-swatch.task-card-pastel-4 {
        background: #e8f1ff;
    }

    .card-color-swatch.task-card-pastel-5 {
        background: #f4ecff;
    }

    .card-color-swatch.task-card-pastel-6 {
        background: #ffecee;
    }

    /* Dropdown Styles */
    #createCardModal .member-dropdown .dropdown-toggle::after,
    #createCardModal .attachment-dropdown .dropdown-toggle::after,
    #createCardModal .custom-field-dropdown .dropdown-toggle::after {
        display: none !important;
    }

    .dropdown-menu {
        border: 1px solid var(--gray-300);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        z-index: 1050;
    }

    /* Ensure dropdown works within modal */
    .modal .dropdown-menu {
        z-index: 1060;
    }

    .dropdown-header {
        border-bottom: 1px solid var(--gray-300);
        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: var(--gray-600);
        font-size: 12px;
    }

    .user-item {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        cursor: pointer;
        border-radius: 6px;
    }

    .user-item:hover {
        background-color: var(--gray-100);
        transition: background-color 0.2s ease;
    }

    .user-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 12px;
    }

    .user-info h6 {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--gray-800);
    }

    .user-info small {
        color: var(--gray-600);
        font-size: 12px;
    }

    .selected-member-item {
        display: inline-flex;
        align-items: center;
        background: white;
        border-radius: 8px;
        transition: all 0.2s ease;
        position: relative;
    }

    .selected-member-dropdown-item {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        border-radius: 6px;
        transition: background-color 0.2s ease;
        position: relative;
    }

    .selected-member-dropdown-item:hover {
        background-color: var(--gray-100);
    }

    .selected-member-dropdown-item:hover .remove-member-btn {
        opacity: 1;
        visibility: visible;
    }

    .selected-member-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 5px;
    }

    .remove-member-btn {
        background: none;
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 6px;
        font-size: 30px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    /* FIXME: Implementasi zoom masih belum sempurna, sementara dinonaktifkan dulu */
    /* .preview-img.zoomed {
    transform: scale(2);
    cursor: zoom-out;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    max-width: 90vw;
    max-height: 70vh;
  } */

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

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

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

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

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

    .is-invalid {
        border-color: #dc3545 !important;
    }

    .invalid-feedback {
        color: #dc3545;
        font-size: 14px;
        margin-top: 4px;
    }

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

    /* ========== Desktop Styles ========== */
    /* Desktop view (>= 992px) - ensure modal body is scrollable */
    @media (min-width: 992px) {
        #createCardModal .modal-dialog {
            max-width: 500px;
        }

        #createCardModal .modal-body {
            max-height: 70vh !important;
            overflow-y: auto !important;
            padding-bottom: 16px !important;
        }
    }

    /* ========== Mobile Responsive Styles ========== */

    /* Tablet and below (< 992px) */
    @media (max-width: 991.98px) {
        #createCardModal .modal-dialog {
            max-width: 95vw;
            margin: 10px auto;
        }

        #createCardModal .modal-body {
            max-height: 60vh !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 10px !important;
        }

        /* Modal footer sticky di bawah */
        #createCardModal .modal-footer {
            position: sticky;
            bottom: 0;
            background: #fff;
            z-index: 10;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        }

        /* Fix Summernote toolbar untuk mobile */
        #createCardModal .note-editor.note-frame {
            border: 1px solid var(--gray-400) !important;
        }

        #createCardModal .note-toolbar {
            flex-wrap: wrap !important;
        }

        #createCardModal .note-btn-group {
            flex-wrap: wrap !important;
        }
    }

    /* Mobile (< 768px) */
    @media (max-width: 767.98px) {
        #createCardModal .modal-dialog {
            max-width: 98vw;
            margin: 5px auto;
        }

        #createCardModal .modal-body {
            padding: 12px !important;
            max-height: 55vh !important;
        }

        #createCardModal .mb-4 {
            margin-bottom: 0.75rem !important;
        }

        /* Fix Summernote editor di mobile agar tidak freeze/hilang */
        #createCardModal .note-editable {
            min-height: 100px !important;
            -webkit-user-select: text !important;
            user-select: text !important;
            -webkit-touch-callout: default !important;
        }

        /* Toolbar lebih compact di mobile */
        #createCardModal .note-toolbar .note-btn {
            padding: 4px 8px !important;
            font-size: 12px !important;
        }

        /* Dropdown fix untuk mobile - JANGAN pakai position fixed */
        #createCardModal .dropdown-menu:not(.attachment-action-dropdown) {
            max-width: calc(100vw - 30px) !important;
            width: auto !important;
        }

        /* Attachment action dropdown (titik 3) - munculkan di bawah */
        #createCardModal .attachment-action-dropdown,
        .attachment-action-dropdown {
            position: absolute !important;
            transform: none !important;
            top: 100% !important;
            bottom: auto !important;
            right: 0 !important;
            left: auto !important;
            min-width: 120px !important;
            z-index: 1060 !important;
        }

        #createCardModal .custom-field-dropdown .dropdown-menu,
        #createCardModal .attachment-dropdown .dropdown-menu,
        #createCardModal .member-dropdown .dropdown-menu {
            width: calc(100vw - 30px) !important;
            max-width: none !important;
            position: absolute !important;
            left: 50% !important;
            right: auto !important;
            transform: translateX(-50%) !important;
        }
    }

    /* Very small mobile (< 576px) */
    @media (max-width: 575.98px) {
        #createCardModal .modal-header {
            padding: 10px 12px;
        }

        #createCardModal .modal-title {
            font-size: 1rem;
        }

        #createCardModal label.fw-bold {
            font-size: 0.875rem;
        }

        #createCardModal .form-control {
            font-size: 14px;
        }

        /* Prevent iOS zoom on input focus */
        #createCardModal input[type="text"],
        #createCardModal input[type="date"],
        #createCardModal textarea,
        #createCardModal .note-editable {
            font-size: 16px !important;
        }
    }
</style>

<script>
    const CARD_PASTEL_CLASSES = [
        'task-card-white',
        'task-card-pastel-1',
        'task-card-pastel-2',
        'task-card-pastel-3',
        'task-card-pastel-4',
        'task-card-pastel-5',
        'task-card-pastel-6'
    ];

    function isValidPastelClass(value) {
        return CARD_PASTEL_CLASSES.includes(value);
    }

    function setCreateCardColor(colorClass = 'task-card-white') {
        const normalizedColor = isValidPastelClass(colorClass) ? colorClass : 'task-card-white';
        const colorInput = document.getElementById('cardColorInput');
        if (colorInput) {
            colorInput.value = normalizedColor;
        }

        document.querySelectorAll('#createCardColorPicker .card-color-swatch').forEach((swatch) => {
            swatch.classList.toggle('selected', swatch.getAttribute('data-color') === normalizedColor);
        });
    }

    // Opens the Create Card modal and resets its state
    function openCreateCardModal(listId) {
        const modal = new bootstrap.Modal(document.getElementById('createCardModal'));
        document.getElementById('createCardModal').setAttribute('data-list-id', listId);

        // Clear the form
        document.getElementById('cardTitleInput').value = '';
        document.getElementById('cardDueDateInput').value = '';
        // Kosongkan Summernote, bukan hanya textarea
        $('#cardDescriptionInput').summernote('reset'); // <-- ini mengosongkan editor
        document.getElementById('cardDescriptionInput').value = '';
        setCreateCardColor('task-card-white');

        // Reset members and attachments containers
        document.getElementById('cardMembersContainer').innerHTML = '';
        document.getElementById('attachmentsContainer').innerHTML = '';

        modal.show();
    }

    $(document).ready(function() {
        document.querySelectorAll('#createCardColorPicker .card-color-swatch').forEach((swatch) => {
            swatch.addEventListener('click', function() {
                setCreateCardColor(this.getAttribute('data-color'));
            });
        });
        setCreateCardColor(document.getElementById('cardColorInput')?.value || 'task-card-white');

        // Detect if mobile device
        const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator
                .userAgent) ||
            window.innerWidth < 768;

        // Konfigurasi Summernote dengan dukungan mobile
        $('#cardDescriptionInput').summernote({
            placeholder: "Masukkan deskripsi card di sini..",
            height: isMobile ? 100 : 120,
            toolbar: isMobile ? [
                // Toolbar lebih sederhana untuk mobile
                ['style', ['bold', 'italic', 'underline']],
                ['para', ['ul', 'ol']],
            ] : [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['color', ['color']],
                ['para', ['ul', 'ol']],
                ['view', ['fullscreen', 'codeview']],
            ],
            // Opsi tambahan untuk mobile support
            disableDragAndDrop: isMobile,
            shortcuts: !isMobile,
            callbacks: {
                onInit: function() {
                    // Fix untuk iOS/Android agar editor bisa di-tap dan diketik
                    if (isMobile) {
                        var $editable = $(this).next('.note-editor').find('.note-editable');
                        $editable.attr('contenteditable', 'true');
                        $editable.css({
                            '-webkit-user-select': 'text',
                            'user-select': 'text',
                            '-webkit-touch-callout': 'default'
                        });
                    }
                },
                onFocus: function() {
                    // Scroll ke editor saat fokus di mobile
                    if (isMobile) {
                        setTimeout(function() {
                            var editorTop = $('.note-editor').offset().top;
                            var modalBody = $('#createCardModal .modal-body');
                            modalBody.animate({
                                scrollTop: modalBody.scrollTop() + editorTop -
                                    modalBody.offset().top - 50
                            }, 300);
                        }, 300);
                    }
                }
            }
        });
    });

    // Handles card member selection logic with pagination
    function initializeMemberSelection() {
        let cardAvailableUsers = [];
        let cardSelectedMembers = [];
        let currentPage = 1;
        let hasMoreUsers = true;
        let isLoadingUsers = false;
        let currentSearchTerm = '';

        // Render users when dropdown is shown
        const cardMembersDropdown = document.getElementById('cardMembersDropdownBtn');
        if (cardMembersDropdown) {
            cardMembersDropdown.addEventListener('shown.bs.dropdown', function() {
                // Load users with pagination when dropdown opens
                currentPage = 1;
                hasMoreUsers = true;
                cardAvailableUsers = [];
                loadCardAvailableUsers(true);
            });

            // Prevent dropdown from closing on inner click
            const dropdownMenu = document.querySelector('#cardMembersDropdownBtn + .dropdown-menu');
            if (dropdownMenu) {
                dropdownMenu.addEventListener('click', function(e) {
                    e.stopPropagation();
                });
            }
        }

        function loadCardAvailableUsers(reset = false) {
            if (isLoadingUsers || (!hasMoreUsers && !reset)) return;

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

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

            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('loadingMoreCardUsers');
                        if (loadingIndicator) loadingIndicator.remove();

                        cardAvailableUsers = reset ? data.users : [...cardAvailableUsers, ...data.users];
                        hasMoreUsers = data.pagination.has_more;
                        renderCardAvailableUsers();
                    } else {
                        throw new Error(data.message || 'Gagal memuat anggota board');
                    }
                })
                .catch(error => {
                    console.error('Error saat memuat anggota board:', 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
        function renderCardAvailableUsers() {
            const container = document.getElementById('cardAvailableUsers');

            // Exclude already selected users
            const unselectedUsers = cardAvailableUsers.filter(user =>
                !cardSelectedMembers.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 anggota 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="loadMoreCardUsersBtn">Muat lebih banyak anggota</button>';
                container.appendChild(loadMoreBtn);

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

            // Handle click to select user
            container.querySelectorAll('.user-item').forEach(item => {
                item.addEventListener('click', function() {
                    const userId = parseInt(this.dataset.userId);
                    const user = cardAvailableUsers.find(u => u.id === userId);

                    if (user && !cardSelectedMembers.some(member => member.id === userId)) {
                        cardSelectedMembers.push(user);
                        renderCardAvailableUsers();
                        renderCardSelectedMembers();
                        updateCardMemberHiddenInput();
                    }
                });
            });

            // Setup infinite scroll
            setupCardInfiniteScroll();
        }

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

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

        function handleCardUserScroll(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++;
                loadCardAvailableUsers(false);
            }
        }

        // Render selected members
        function renderCardSelectedMembers() {
            const container = document.getElementById('cardMembersContainer');
            const boardMembersContainer = document.getElementById('cardBoardMembers');

            if (cardSelectedMembers.length === 0) {
                container.innerHTML = '';
                boardMembersContainer.innerHTML = '';
                return;
            }

            // Show selected members
            const selectedItems = cardSelectedMembers.map(member => `
        <div class="selected-member-item" data-user-id="${member.id}">
          <img src="${member.image}" alt="${member.name}" class="selected-member-avatar">
        </div>
      `).join('');

            container.innerHTML = selectedItems;

            // Show selected members in dropdown
            const boardMemberItems = cardSelectedMembers.map(member => `
        <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>
          </div>
          <button type="button" class="remove-member-btn" data-user-id="${member.id}">×</button>
        </div>
      `).join('');

            boardMembersContainer.innerHTML = boardMemberItems;

            // Remove member from dropdown
            boardMembersContainer.querySelectorAll('.remove-member-btn').forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const userId = parseInt(this.dataset.userId);
                    cardSelectedMembers = cardSelectedMembers.filter(member => member.id !== userId);
                    renderCardAvailableUsers();
                    renderCardSelectedMembers();
                    updateCardMemberHiddenInput();
                });
            });
        }

        // Update hidden input with selected member IDs
        function updateCardMemberHiddenInput() {
            const memberIds = cardSelectedMembers.map(member => member.id).join(',');
            document.getElementById('cardSelectedMemberIds').value = memberIds;
        }

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

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

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

        // Reset members when modal closes
        document.getElementById('createCardModal').addEventListener('hidden.bs.modal', function() {
            cardSelectedMembers = [];
            renderCardSelectedMembers();
            updateCardMemberHiddenInput();
            document.getElementById('cardMemberSearch').value = '';
        });
    }

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

    // Handles attachment logic
    function initializeAttachment() {
        // Prevent dropdown from closing on inner click
        const dropdownMenu = document.querySelector('#cardAttachmentsDropdownBtn + .dropdown-menu');

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

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

            if (!cardAttachments.length) {
                attachmentsContainer.innerHTML = '';
                return;
            }

            // Split attachments into files and links
            const fileAttachments = cardAttachments.filter(att => att.file);
            const linkAttachments = cardAttachments.filter(att => att.link && !att.file);

            let html = '';

            if (fileAttachments.length) {
                html += `<div class="mx-1"><h6 class="attachment-header">Files</h6></div>`;
                html += fileAttachments.map((att, idx) => {
                    const mainIdx = cardAttachments.indexOf(att);
                    let previewHtml = '';

                    if (att.file && att.file.type.startsWith('image/')) {
                        const imgUrl = URL.createObjectURL(att.file);
                        const createdAt = att.createdAt ? new Date(att.createdAt) : new Date();
                        const dateStr = createdAt.toLocaleDateString(undefined, {
                            year: 'numeric',
                            month: 'short',
                            day: 'numeric'
                        });
                        previewHtml = `
              <img src="${imgUrl}" alt="preview" class="attachment-img-thumb me-2"
                data-img-url="${imgUrl}"
                data-filename="${att.file.name}"
                data-created-at="${dateStr}"
                data-idx="${mainIdx}" />
            `;
                    } else if (att.file) {
                        // Get file extension
                        const ext = att.file.name.split('.').pop().toUpperCase();
                        previewHtml = `
              <div class="attachment-file-thumb me-2" data-idx="${mainIdx}">
                ${ext}
              </div>
            `;
                    }

                    return `
            <div class="attachment-text d-flex align-items-center mb-1 p-2 rounded">
              <span class="me-2">${previewHtml}</span> <small>${att.displayText || att.file.name}</small>
              <div class="attachment-dropdown ms-auto position-relative">
                <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 attachment-action-dropdown">
                  <li><a class="dropdown-item text-danger remove-attachment" href="#" data-idx="${mainIdx}">Hapus</a></li>
                </ul>
              </div>
            </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 = cardAttachments.indexOf(att);

                    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="${att.link}" target="_blank">${att.displayText || att.link}</a>
              <div class="attachment-dropdown ms-auto position-relative">
                <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 attachment-action-dropdown">
                  <li><a class="dropdown-item edit-attachment" href="#" data-idx="${mainIdx}">Edit</a></li>
                  <li><a class="dropdown-item text-danger remove-attachment" href="#" data-idx="${mainIdx}">Hapus</a></li>
                </ul>
              </div>
            </div>
          `;
                }).join('');
            }
            attachmentsContainer.innerHTML = html;

            // Add remove event listeners
            attachmentsContainer.querySelectorAll('.remove-attachment').forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const idx = parseInt(this.getAttribute('data-idx'));
                    cardAttachments.splice(idx, 1);
                    renderCardAttachments();
                });
            });

            // 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 = cardAttachments[idx];

                    // Pre-fill fields
                    document.getElementById('editCardLinkInput').value = att.link || '';
                    document.getElementById('editDisplayInput').value = att.displayText || '';

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

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

                    // Get modal scroll offset
                    const modalBody = document.querySelector('#createCardModal .modal-body');
                    const modalRect = modalBody.getBoundingClientRect();

                    // Calculate position relative to modal
                    dropdown.style.position = 'absolute';
                    dropdown.style.zIndex = '1070';
                    dropdown.style.top = `${rect.bottom - modalRect.top + modalBody.scrollTop}px`;
                    dropdown.style.left = `${rect.left - modalRect.left}px`;
                    dropdown.style.display = 'block';
                });
            });

            // Save edited link
            document.getElementById('saveEditLinkBtn').addEventListener('click', function() {
                const dropdown = document.getElementById('editLinkDropdown');
                const idx = parseInt(dropdown.getAttribute('data-edit-idx'));
                const link = document.getElementById('editCardLinkInput').value.trim();
                const displayText = document.getElementById('editDisplayInput').value.trim();

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

                // Update attachment
                cardAttachments[idx].link = link;
                cardAttachments[idx].displayText = displayText;

                // Re-render and hide dropdown
                renderCardAttachments();
                dropdown.style.display = 'none';
            });

            // Cancel edit
            document.getElementById('cancelEditLinkBtn').addEventListener('click', function() {
                document.getElementById('editLinkDropdown').style.display = 'none';
            });

            // Close edit dropdown when clicking outside
            document.addEventListener('click', function(e) {
                const dropdown = document.getElementById('editLinkDropdown');
                if (dropdown.style.display === 'block' && !dropdown.contains(e.target) && !e.target.classList
                    .contains('edit-attachment')) {
                    dropdown.style.display = 'none';
                }
            });

            // 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 = cardAttachments[idx];
                    const file = att.file;
                    const fileName = att.displayText || (file ? file.name : '');
                    const createdAt = att.createdAt ? new Date(att.createdAt).toLocaleDateString(
                        undefined, {
                            year: 'numeric',
                            month: 'short',
                            day: 'numeric'
                        }) : '';

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

                    // Set description
                    const modalDesc = document.getElementById('previewModalDescription');
                    modalDesc.innerHTML = `
            <div>${fileName}</div>
            <div class="small text-white-50 mt-1">${createdAt}</div>
          `;

                    if (file && file.type.startsWith('image/')) {
                        document.getElementById('previewModalImg').src = URL.createObjectURL(file);
                        document.getElementById('previewModalImg').classList.remove('d-none');
                    } else if (file && file.type === 'application/pdf') {
                        document.getElementById('previewModalPdf').src = URL.createObjectURL(file);
                        document.getElementById('previewModalPdf').classList.remove('d-none');
                    } else if (file && file.type.startsWith('text/')) {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            document.getElementById('previewModalText').textContent = e.target
                                .result;
                            document.getElementById('previewModalText').classList.remove('d-none');
                        };
                        reader.readAsText(file);
                    } else {
                        // Generic file: show icon and filename
                        document.getElementById('previewModalGeneric').innerHTML = `
              <i class="fas fa-file fa-4x mb-3"></i>
              <div>Preview tidak tersedia untuk tipe file ini!</div>
            `;
                        document.getElementById('previewModalGeneric').classList.remove('d-none');
                    }

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

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

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

        customCardAttachmentInput.addEventListener('change', function(e) {
            const file = e.target.files[0];

            if (!file) return;

            // Check for duplicate filename
            const isDuplicate = cardAttachments.some(att => {
                if (att.file) {
                    return att.file.name === file.name;
                }
                return false;
            });

            if (isDuplicate) {
                showAlert('danger', 'File dengan nama ini sudah ditambahkan.');
                e.target.value = '';
                return;
            }

            cardAttachments.push({
                file: file,
                link: null,
                displayText: file.name,
                createdAt: new Date()
            });
            renderCardAttachments();
            dropdownInstance.hide();

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

        // Handle Insert button click
        const insertBtn = dropdownMenu.querySelector('.btn-primary');
        insertBtn.addEventListener('click', function() {
            const linkInput = document.getElementById('cardLinkInput');
            const displayInput = document.getElementById('displayInput');
            const dropdownInstance = bootstrap.Dropdown.getOrCreateInstance(document.getElementById(
                'cardAttachmentsDropdownBtn'));

            const link = linkInput.value.trim();
            const displayText = displayInput.value.trim();

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

            // Check for duplicate link
            const isDuplicate = cardAttachments.some(att => {
                if (att.link) {
                    return att.link === link;
                }
                return false;
            });

            if (isDuplicate) {
                showAlert('danger', 'Tautan ini sudah ditambahkan.');
                return;
            }

            cardAttachments.push({
                file: null,
                link: link || null,
                displayText: displayText || null
            });
            renderCardAttachments();
            dropdownInstance.hide();

            // Reset fields
            linkInput.value = '';
            displayInput.value = '';
        });

        // Reset attachments when modal closes
        document.getElementById('createCardModal').addEventListener('hidden.bs.modal', function() {
            cardAttachments = [];
            renderCardAttachments();
        });

        // Initial render
        renderCardAttachments();
    }

    let cardCustomFields = [];

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

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

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

            let html = cardCustomFields.map((field, idx) => {
                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">
              ${renderCardFieldInput(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
            attachCardFieldInputListeners();

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

                    if (confirm('Apakah Anda yakin ingin menghapus field custom ini?')) {
                        cardCustomFields.splice(idx, 1);
                        renderCardCustomFields();
                    }
                });
            });

            // 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 = cardCustomFields[idx];

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

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

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

                    // Get modal scroll offset
                    const modalBody = document.querySelector('#createCardModal .modal-body');
                    const modalRect = modalBody.getBoundingClientRect();

                    // Calculate position relative to modal
                    dropdown.style.position = 'absolute';
                    dropdown.style.zIndex = '1070';
                    dropdown.style.top = `${rect.bottom - modalRect.top + modalBody.scrollTop}px`;
                    dropdown.style.left = `${rect.left - modalRect.left}px`;
                    dropdown.style.display = 'block';
                });
            });
        }

        // Render field input based on type
        function renderCardFieldInput(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="${escapeCardHtml(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
        function attachCardFieldInputListeners() {
            document.querySelectorAll('.custom-field-input').forEach(input => {
                input.addEventListener('change', function(e) {
                    const idx = parseInt(this.getAttribute('data-idx'));
                    if (cardCustomFields[idx]) {
                        cardCustomFields[idx].value = this.value;
                    }
                });
            });
        }

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

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

        // Get dropdown instance
        const dropdownBtn = document.getElementById('cardCustomFieldDropdownBtn');
        if (!dropdownBtn) {
            console.error('Custom field dropdown button not found');
            return;
        }

        const dropdownInstance = bootstrap.Dropdown.getOrCreateInstance(dropdownBtn);

        // Handle Create button click
        const createBtn = document.getElementById('cardCreateCustomField');
        if (createBtn) {
            // Remove any existing listeners
            const newCreateBtn = createBtn.cloneNode(true);
            createBtn.parentNode.replaceChild(newCreateBtn, createBtn);

            newCreateBtn.addEventListener('click', function() {
                const nameInput = document.getElementById('cardCustomFieldName');
                const typeSelect = document.getElementById('cardCustomFieldType');

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

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

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

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

                // Prepare the new field object
                const newField = {
                    name: name,
                    type: type,
                    value: getCardDefaultValue(type),
                    createdAt: new Date()
                };

                // Add to local array
                cardCustomFields.push(newField);

                // Render and close dropdown
                renderCardCustomFields();
                dropdownInstance.hide();

                // Reset fields
                nameInput.value = '';
                typeSelect.value = '';
            });
        }

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

        // Save edited field
        const saveEditBtn = document.getElementById('cardSaveEditCustomFieldBtn');
        if (saveEditBtn) {
            // Remove any existing listeners
            const newSaveEditBtn = saveEditBtn.cloneNode(true);
            saveEditBtn.parentNode.replaceChild(newSaveEditBtn, saveEditBtn);

            newSaveEditBtn.addEventListener('click', function() {
                const dropdown = document.getElementById('cardEditCustomFieldDropdown');
                const idx = parseInt(dropdown.getAttribute('data-edit-idx'));
                const name = document.getElementById('cardEditCustomFieldName').value.trim();
                const type = document.getElementById('cardEditCustomFieldType').value;

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

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

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

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

                // Update field
                cardCustomFields[idx].name = name;

                // If type changed, reset value
                if (cardCustomFields[idx].type !== type) {
                    cardCustomFields[idx].type = type;
                    cardCustomFields[idx].value = getCardDefaultValue(type);
                }

                // Re-render and hide dropdown
                renderCardCustomFields();
                dropdown.style.display = 'none';
            });
        }

        // Cancel edit
        const cancelEditBtn = document.getElementById('cardCancelEditCustomFieldBtn');
        if (cancelEditBtn) {
            // Remove any existing listeners
            const newCancelEditBtn = cancelEditBtn.cloneNode(true);
            cancelEditBtn.parentNode.replaceChild(newCancelEditBtn, cancelEditBtn);

            newCancelEditBtn.addEventListener('click', function() {
                document.getElementById('cardEditCustomFieldDropdown').style.display = 'none';
            });
        }

        // Close edit dropdown when clicking outside
        document.addEventListener('click', function(e) {
            const dropdown = document.getElementById('cardEditCustomFieldDropdown');
            if (dropdown && dropdown.style.display === 'block' &&
                !dropdown.contains(e.target) &&
                !e.target.classList.contains('edit-custom-field')) {
                dropdown.style.display = 'none';
            }
        });

        // Reset custom fields when modal closes
        const createCardModal = document.getElementById('createCardModal');
        if (createCardModal) {
            createCardModal.addEventListener('hidden.bs.modal', function() {
                cardCustomFields = [];
                renderCardCustomFields();

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

        // Initial render
        renderCardCustomFields();
    }

    function formatDate(dateStr) {
        if (!dateStr) return '';
        const d = new Date(dateStr);
        return d.toLocaleDateString('en-GB', {
            day: '2-digit',
            month: 'short',
            year: '2-digit'
        });
    }

    function getPastelCardClass(cardId) {
        return 'task-card-white';
    }

    function resolveCardPastelClass(cardColor, cardId) {
        if (isValidPastelClass(cardColor)) {
            return cardColor;
        }

        return getPastelCardClass(cardId);
    }

    function addCardToList(card) {
        // Find the list container by list_id
        const listContainer = document.querySelector(`[data-list-id="${card.list_id}"] .cards-container`);
        if (!listContainer) return;
        const pastelClass = resolveCardPastelClass(card.card_color, card.id);

        // Build the card HTML
        const cardHtml = `
      <div class="task-card ${pastelClass}" data-task-id="${card.id}" data-list-id="${card.list_id}" 
           data-title="${(card.title || '').toLowerCase()}"
           data-created-at="${card.created_at_timestamp || ''}"
           data-due-date="${card.due_date_timestamp || ''}"
           data-comments-count="${card.comments_count || 0}"
           data-attachments-count="${card.attachments_count || 0}"
           data-priority="${card.priority || 0}"
           data-created-by="${(card.user_create || '').toLowerCase()}"
           style="opacity: 0; transform: scale(0.8);">
        <div class="task-card-border task-card-border-${card.border_color || 'default'}"></div>
        <div class="task-card-content">
          <div class="task-user">${card.user_create || ''}</div>
          <div class="task-title">${card.title}</div>
          <div class="task-bottom">
            ${card.due_date ? `
                <div class="task-date">
                  <i class="far fa-clock"></i>
                  <span class="created-date" title="Created at">${formatDate(card.created_at)}</span>
                  <span class="date-separator">·</span>
                  <span class="due-date" title="Due date">${formatDate(card.due_date)}</span>
                </div>
              ` : ''}
            <div class="task-stats">
              ${(card.comments_count > 0) ? `
                  <div class="task-stat-item">
                    <i class="far fa-comments"></i>
                    <span>${card.comments_count}</span>
                  </div>
                ` : ''}
              ${(card.attachments_count > 0) ? `
                  <div class="task-stat-item">
                    <i class="fas fa-paperclip"></i>
                    <span>${card.attachments_count}</span>
                  </div>
                ` : ''}
            </div>
          </div>
          ${isAdmin ? `
            <div class="card-action-dropdown dropdown dropstart"
                  style="position: absolute; top: 10px; right: 10px;">
              <button class="card-action-btn"
                      type="button"
                      id="cardActionDropdownBtn-${card.id}"
                      data-bs-toggle="dropdown" aria-expanded="false"
                      title="Edit">
                <i class="fas fa-edit"></i>
              </button>
              <ul class="dropdown-menu"
                  aria-labelledby="cardActionDropdownBtn-${card.id}"
                  style="min-width: 220px;">
                <div class="dropdown-header text-center">
                  <h5 class="dropdown-title fw-bold">
                    Aksi Card
                  </h5>
                </div>
                <li><hr class="dropdown-divider my-1"></li>
                <li class="px-3 pt-2 pb-1">
                  <small class="text-muted fw-semibold">Warna card</small>
                </li>
                <li class="px-3 pb-2">
                  <div class="card-color-quick-picker" onclick="event.stopPropagation();">
                    ${CARD_PASTEL_CLASSES.map((colorClass) => `
                      <button type="button"
                              class="card-color-quick-swatch ${colorClass} ${pastelClass === colorClass ? 'selected' : ''}"
                              onclick="setCardColorFromMenu(${card.id}, '${colorClass}', event)"
                              title="${colorClass}">
                      </button>
                    `).join('')}
                  </div>
                </li>
                <li class="mt-2">
                  <a class="dropdown-item text-dark"
                      href="#"
                      onclick="archiveCard(${card.id}); event.stopPropagation();">
                    <i class="fas fa-archive me-2"></i>Arsipkan card
                  </a>
                </li>
              </ul>
            </div>
          ` : ''}
        </div>
      </div>
    `;

        // Insert the new card at the correct position
        listContainer.insertAdjacentHTML('beforeend', cardHtml);

        // Animate the new card in
        const newCard = listContainer.lastElementChild;
        setTimeout(() => {
            newCard.style.transition = 'all 0.3s ease';
            newCard.style.opacity = '1';
            newCard.style.transform = 'scale(1)';

            // Check and toggle overflow after card is added
            if (typeof checkAndToggleOverflow === 'function') {
                checkAndToggleOverflow();
            }
        }, 50);
    }

    // Function to create a new card
    function createCard() {
        const modal = document.getElementById('createCardModal');
        const listId = modal.getAttribute('data-list-id');
        const title = document.getElementById('cardTitleInput').value.trim().toUpperCase();
        const dueDate = document.getElementById('cardDueDateInput').value;
        const description = $('#cardDescriptionInput').summernote('code');
        const memberIds = document.getElementById('cardSelectedMemberIds').value;
        const cardColor = document.getElementById('cardColorInput').value;

        clearValidationErrors();

        const createBtn = document.getElementById('createCardBtn');
        const originalText = createBtn.innerHTML;
        createBtn.disabled = true;
        createBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Membuat..';

        const formData = new FormData();
        formData.append('card_title', title);
        formData.append('list_id', listId);
        formData.append('title', title);
        formData.append('due_date', dueDate || '');
        formData.append('description', description || '');
        formData.append('member_ids', memberIds || '');
        formData.append('card_color', cardColor || '');

        if (cardCustomFields?.length > 0) {
            formData.append('custom_fields', JSON.stringify(cardCustomFields));
        }

        cardAttachments.forEach(att => {
            if (att.file) {
                formData.append('attachments[]', att.file);
            } else if (att.link) {
                formData.append('attachment_links[]', JSON.stringify({
                    link: att.link,
                    displayText: att.displayText || ''
                }));
            }
        });

        const createCardUrl = '{{ url('boards') }}';

        fetch(createCardUrl, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': CSRF_TOKEN
                },
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    bootstrap.Modal.getInstance(modal).hide();
                    addCardToList(data.card);
                    showAlert('success', 'Card telah berhasil dibuat!');
                } else {
                    data.errors ? displayValidationErrors(data.errors) : showAlert('danger', data.message ||
                        'Gagal membuat card');
                }
            })
            .catch(error => {
                console.error('Error creating card:', error);
                showAlert('danger', 'Gagal membuat card. Silakan coba lagi.');
            })
            .finally(() => {
                createBtn.disabled = false;
                createBtn.innerHTML = originalText;
            });
    }

    // Function to display validation errors
    function displayValidationErrors(errors) {
        for (const [field, messages] of Object.entries(errors)) {
            const fieldMap = {
                'title': 'cardTitleInput',
                'due_date': 'cardDueDateInput',
                'description': 'cardDescriptionInput'
            };

            const inputId = fieldMap[field];
            if (inputId) {
                showFieldError(inputId, messages[0]); // Show first error message
            }
        }

        // Show general alert with all errors
        showAlert('danger', 'Harap isi semua field yang diperlukan dengan benar.');
    }

    // Function to show error for a specific field
    function showFieldError(inputId, message) {
        const input = document.getElementById(inputId);
        if (!input) return;

        // Special handling for Summernote
        if (inputId === 'cardDescriptionInput') {
            // Add error class to Summernote editor
            const editor = $(input).next('.note-editor');
            editor.addClass('is-invalid');

            // Remove any existing error message
            editor.parent().find('.invalid-feedback').remove();

            // Create and insert error message
            editor.parent().append(`<div class="invalid-feedback d-block">${message}</div>`);
            return;
        }

        // Add error class to input
        input.classList.add('is-invalid');

        // Remove any existing error message
        const existingError = input.parentElement.querySelector('.invalid-feedback');
        if (existingError) {
            existingError.remove();
        }

        // Create and insert error message
        const errorDiv = document.createElement('div');
        errorDiv.className = 'invalid-feedback d-block';
        errorDiv.textContent = message;
        input.parentElement.appendChild(errorDiv);
    }

    // Function to clear all validation errors
    function clearValidationErrors() {
        // Remove error classes
        document.querySelectorAll('.is-invalid').forEach(el => {
            el.classList.remove('is-invalid');
        });
        $('.note-editor').removeClass('is-invalid');

        // Remove error messages
        document.querySelectorAll('.invalid-feedback').forEach(el => {
            el.remove();
        });
    }

    // Clear errors when user starts typing
    document.getElementById('cardTitleInput')?.addEventListener('input', function() {
        this.classList.remove('is-invalid');
        const errorMsg = this.parentElement.querySelector('.invalid-feedback');
        if (errorMsg) errorMsg.remove();
        this.value = this.value.toUpperCase();
    });

    document.getElementById('cardDueDateInput')?.addEventListener('change', function() {
        this.classList.remove('is-invalid');
        const errorMsg = this.parentElement.querySelector('.invalid-feedback');
        if (errorMsg) errorMsg.remove();
    });

    document.getElementById('cardDescriptionInput')?.addEventListener('input', function() {
        this.classList.remove('is-invalid');
        const errorMsg = this.parentElement.querySelector('.invalid-feedback');
        if (errorMsg) errorMsg.remove();
    });

    // FIXME: Implementasi zoom masih belum sempurna, sementara dinonaktifkan dulu
    // document.addEventListener('DOMContentLoaded', function() {
    //   const modalImg = document.getElementById('previewModalImg');
    //   const modal = document.getElementById('previewModal');

    //   if (modalImg) {
    //     modalImg.addEventListener('click', function() {
    //       this.classList.toggle('zoomed');
    //     });
    //   }

    //   // Reset zoom when modal is hidden
    //   if (modal) {
    //     modal.addEventListener('hidden.bs.modal', function() {
    //       if (modalImg) {
    //         modalImg.classList.remove('zoomed');
    //       }
    //     });
    //   }
    // });

    document.addEventListener("DOMContentLoaded", () => {
        initializeMemberSelection();
        initializeAttachment();
        initializeCustomField();
    });
</script>