@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    @include('components.search')
    @include('components.kanban-alert')
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="board rounded-lg border-0">
                    <div class="board-header px-4 py-3 border-0">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center gap-3">
                                <a href="{{ url('boards') }}"
                                    class="btn btn-sm btn-outline-secondary d-flex align-items-center justify-content-center mt-3"
                                    title="Kembali ke Board">
                                    <i class="fas fa-arrow-left"></i>
                                </a>
                                <h6
                                    class="board-title-display mb-1 d-flex align-items-center {{ $current_user_role !== 'admin' ? 'non-draggable' : '' }}">
                                    {{ $board->title }}
                                </h6>
                            </div>
                            <input type="text" class="d-none board-title-input" value="{{ $board->title }}"
                                data-board-id="{{ $board->id }}">
                            <div class="action-buttons">
                                <div class="archive-dropdown">
                                    <button type="button" class="action-btn dropdown-toggle" title="Archive"
                                        id="archiveDropdownBtn" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="fas fa-archive"></i>
                                    </button>
                                    {{-- Archive Dropdown --}}
                                    <div class="dropdown-menu py-0" aria-labelledby="archiveDropdownBtn"
                                        style="width: 350px;" data-bs-auto-close="outside">
                                        <div class="dropdown-header text-center">
                                            <h5 class="dropdown-title fw-bold mt-2">Arsip List & Cards</h5>
                                        </div>
                                        {{-- Archive Cards Menu --}}
                                        <div class="dropdown-content p-3 pb-0 archive-cards-menu">
                                            <div class="d-flex mb-3">
                                                <input type="text" class="form-control" id="archiveSearchCard"
                                                    placeholder="Cari cards..">
                                                <button type="button"
                                                    class="btn btn-primary btn-sm ms-2 mt-3 px-3 py-2 shrink-0"
                                                    onclick="switchToLists()">Ubah ke Arsip list</button>
                                            </div>
                                            @forelse($archived_cards as $card)
                                                <div class="mb-3">
                                                    <div class="archived-card" data-task-id="{{ $card->id }}"
                                                        data-list-id="{{ $card->list_id }}">
                                                        <div class="archived-card-content">
                                                            <div class="task-user">{{ $card->user_create }}</div>
                                                            <div class="task-title">{{ $card->title }}</div>
                                                            <div class="archived-icon">
                                                                <i class="fas fa-archive"></i><small
                                                                    class="ms-2">Diarsipkan</small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex gap-2">
                                                        <button class="archived-action-link me-2 d-flex align-items-center"
                                                            onclick="restoreCard({{ $card->id }})"
                                                            id="restore-card-btn-{{ $card->id }}">
                                                            <span>Kembalikan</span>
                                                            <i class="fas fa-spinner fa-spin d-none ms-2"
                                                                id="restore-card-spinner-{{ $card->id }}"
                                                                style="width: 0.875rem; height: 0.875rem;">
                                                            </i>
                                                        </button>
                                                        <button class="archived-action-link d-flex align-items-center"
                                                            onclick="deleteCard({{ $card->id }})"
                                                            id="delete-card-btn-{{ $card->id }}">
                                                            <span>Hapus</span>
                                                            <i class="fas fa-spinner fa-spin d-none ms-2"
                                                                id="delete-card-spinner-{{ $card->id }}"
                                                                style="width: 0.875rem; height: 0.875rem;">
                                                            </i>
                                                        </button>
                                                    </div>
                                                </div>
                                            @empty
                                                <p class="dropdown-label text-center py-2 text-muted">Tidak ada cards yang
                                                    diarsipkan</p>
                                            @endforelse
                                        </div>
                                        {{-- Archive Lists Menu --}}
                                        <div class="dropdown-content p-3 pb-0 archive-lists-menu d-none">
                                            <div class="d-flex mb-3">
                                                <input type="text" class="form-control" id="archiveSearchList"
                                                    placeholder="Cari lists..">
                                                <button type="button"
                                                    class="btn btn-primary btn-sm ms-2 mt-3 px-3 py-2 shrink-0"
                                                    onclick="switchToCards()">Ubah Ke Arsip Card</button>
                                            </div>
                                            @forelse($archived_lists as $list)
                                                <div class="mb-3">
                                                    <div class="archived-list" data-list-id="{{ $list->id }}">
                                                        <div class="archived-list-content d-flex justify-content-between">
                                                            <div class="list-title">{{ $list->title }}</div>
                                                            <div class="d-flex gap-2">
                                                                <button
                                                                    class="btn btn-outline-primary btn-sm ms-2 mt-3 px-3 py-2 shrink-0 d-flex align-items-center justify-content-center"
                                                                    onclick="restoreList({{ $list->id }})"
                                                                    id="restore-list-btn-{{ $list->id }}"
                                                                    style="min-width: 130px;">
                                                                    <span id="restore-list-text-{{ $list->id }}">
                                                                        <i class="fas fa-redo me-2"></i>Kembalikan
                                                                    </span>
                                                                    <i class="fas fa-spinner fa-spin d-none"
                                                                        id="restore-list-spinner-{{ $list->id }}"
                                                                        style="width: 0.875rem; height: 0.875rem;">
                                                                    </i>
                                                                </button>
                                                                <button
                                                                    class="btn btn-outline-danger btn-sm ms-2 mt-3 px-3 py-2 shrink-0 d-flex align-items-center justify-content-center"
                                                                    onclick="deleteList({{ $list->id }})"
                                                                    id="delete-list-btn-{{ $list->id }}"
                                                                    style="min-width: 100px;">
                                                                    <span id="delete-list-text-{{ $list->id }}">
                                                                        <i class="fas fa-trash me-2"></i>Hapus
                                                                    </span>
                                                                    <i class="fas fa-spinner fa-spin d-none"
                                                                        id="delete-list-spinner-{{ $list->id }}"
                                                                        style="width: 0.875rem; height: 0.875rem;">
                                                                    </i>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @empty
                                                <p class="dropdown-label text-center py-2 text-muted">Tidak ada daftar yang
                                                    diarsipkan</p>
                                            @endforelse
                                        </div>
                                    </div>
                                </div>
                                <div class="filter-dropdown">
                                    <button type="button" class="action-btn dropdown-toggle" title="Filter"
                                        id="filterDropdownBtn" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="fas fa-filter"></i>
                                    </button>
                                    <div class="dropdown-menu py-0" aria-labelledby="filterDropdownBtn"
                                        style="width: 400px;" data-bs-auto-close="outside">
                                        <div class="dropdown-header text-center">
                                            <h5 class="dropdown-title fw-bold mt-2">
                                                Filter
                                            </h5>
                                        </div>
                                        <div class="dropdown-content p-3 pb-0">
                                            <div class="mb-3">
                                                <h6 class="dropdown-label text-dark mb-2">Kata kunci</h6>
                                                <input type="text" class="form-control form-control" id="filterSearch"
                                                    placeholder="Masukkan kata kunci..">
                                            </div>
                                            <div class="dropdown-subheader text-left">
                                                <h5 class="dropdown-title fw-bold mt-2"
                                                    style="margin-left: 15px; font-size: 14px;">
                                                    Filter Berdasarkan Tenggat Waktu (Due Date)
                                                </h5>
                                            </div>
                                            <div class="mb-3">
                                                <div class="row">
                                                    <div class="col-6">
                                                        <label class="form-control-label small mb-1">Dari</label>
                                                        <input type="date" class="form-control form-control-sm"
                                                            id="datedeadlinefrom">
                                                    </div>
                                                    <div class="col-6">
                                                        <label class="form-control-label small mb-1">Sampai</label>
                                                        <input type="date" class="form-control form-control-sm"
                                                            id="datedeadlineto">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <h6 class="dropdown-label text-dark mb-2">Deadline</h6>
                                                <div class="custom-control custom-checkbox">
                                                    <input class="custom-control-input" id="dueNextDay" type="checkbox">
                                                    <label class="custom-control-label" for="dueNextDay"><i
                                                            class="far fa-clock me-2"></i>Besok</label>
                                                </div>
                                                <div class="custom-control custom-checkbox">
                                                    <input class="custom-control-input" id="dueNextWeek" type="checkbox">
                                                    <label class="custom-control-label" for="dueNextWeek"><i
                                                            class="far fa-clock me-2"></i>Minggu depan</label>
                                                </div>
                                                <div class="custom-control custom-checkbox">
                                                    <input class="custom-control-input" id="dueNextMonth"
                                                        type="checkbox">
                                                    <label class="custom-control-label" for="dueNextMonth"><i
                                                            class="far fa-clock me-2"></i>Bulan depan</label>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <h6 class="dropdown-label text-dark mb-2">Label</h6>
                                                <div class="custom-control custom-checkbox">
                                                    <input class="custom-control-input" id="labelOverdue"
                                                        type="checkbox">
                                                    <label class="custom-control-label" for="labelOverdue">
                                                        <i class="far fa-clock me-2"></i>
                                                        <span
                                                            class="label-chip label-chip-overdue text-center">Overdue</span>
                                                    </label>
                                                </div>
                                                <div class="custom-control custom-checkbox">
                                                    <input class="custom-control-input" id="labelUrgent" type="checkbox">
                                                    <label class="custom-control-label" for="labelUrgent">
                                                        <i class="far fa-clock me-2"></i>
                                                        <span
                                                            class="label-chip label-chip-urgent text-center">Urgent</span>
                                                    </label>
                                                </div>
                                                <div class="custom-control custom-checkbox">
                                                    <input class="custom-control-input" id="labelImportant"
                                                        type="checkbox">
                                                    <label class="custom-control-label" for="labelImportant">
                                                        <i class="far fa-clock me-2"></i>
                                                        <span
                                                            class="label-chip label-chip-normal text-center">Normal</span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="dropdown-subheader text-left">
                                                <h5 class="dropdown-title fw-bold mt-2"
                                                    style="margin-left: 15px; font-size: 14px;">
                                                    Filter Berdasarkan Tanggal Pembuatan Card
                                                </h5>
                                            </div>
                                            <div class="mb-3">
                                                <div class="row">
                                                    <div class="col-6">
                                                        <label class="form-control-label small mb-1">Dari</label>
                                                        <input type="date" class="form-control form-control-sm"
                                                            id="datecardfrom">
                                                    </div>
                                                    <div class="col-6">
                                                        <label class="form-control-label small mb-1">Sampai</label>
                                                        <input type="date" class="form-control form-control-sm"
                                                            id="datecardto">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mb-2 pt-2">
                                                <small class="text-muted d-block mb-3" id="filterStatus">Gunakan filter
                                                    untuk menyaring kartu.</small>
                                                <small class="text-primary d-none" id="filterCount"></small>
                                                <div class="text-end">
                                                    <button type="button" class="btn btn-sm btn-outline-secondary"
                                                        onclick="clearAllFilters()">
                                                        <i class="fas fa-times me-1"></i>Kosongkan
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="member-dropdown">
                                    <button type="button" class="action-btn dropdown-toggle" title="Members"
                                        id="membersDropdownBtn" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="fas fa-users"></i>
                                    </button>
                                    <div class="dropdown-menu py-0" aria-labelledby="membersDropdownBtn"
                                        style="width: 400px;" data-bs-auto-close="outside">
                                        <div class="dropdown-header text-center">
                                            <h5 class="dropdown-title fw-bold mt-2">
                                                Anggota Board
                                            </h5>
                                        </div>
                                        <div class="dropdown-content p-3">
                                            <div class="mb-3">
                                                <input type="text" class="form-control form-control" id="memberSearch"
                                                    placeholder="Search members">
                                            </div>
                                            <div class="mb-3">
                                                <h6 class="dropdown-label text-dark mb-2">Anggota board ini</h6>
                                                <div class="mb-2" id="boardMembers"
                                                    style="max-height: 200px; overflow-y: auto;"></div>
                                                <div>
                                                    <h6 class="dropdown-label text-dark mb-2">Semua pengguna yang tersedia
                                                    </h6>
                                                    <div id="availableUsers" style="max-height: 200px; overflow-y: auto;">
                                                        <p class="dropdown-label text-center py-2 text-muted">Tidak ada
                                                            pengguna yang tersedia</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <input type="hidden" id="selectedMemberIds" name="selectedMemberIds"
                                                value="">
                                        </div>
                                    </div>
                                </div>
                                <div class="export-dropdown">
                                    <button type="button" class="action-btn dropdown-toggle" title="Export"
                                        id="exportDropdownBtn" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="fas fa-file-export"></i>
                                    </button>
                                    <div class="dropdown-menu py-0" aria-labelledby="exportDropdownBtn"
                                        style="width: 400px;" data-bs-auto-close="outside">
                                        <div class="dropdown-header text-center">
                                            <h5 class="dropdown-title fw-bold mt-2">
                                                Opsi Ekspor
                                            </h5>
                                        </div>
                                        <div class="dropdown-content p-3">
                                            <div class="mb-3">
                                                <h6 class="dropdown-label text-dark mb-2">Format ekspor</h6>
                                                <div class="custom-control custom-radio mt-2">
                                                    <input class="custom-control-input" id="exportExcel" type="radio"
                                                        name="exportFormat" value="excel" checked>
                                                    <label class="custom-control-label" for="exportExcel">
                                                        <i class="fas fa-file-excel me-2 text-success"></i>Excel
                                                        spreadsheet
                                                    </label>
                                                </div>
                                                <div class="custom-control custom-radio mb-2">
                                                    <input class="custom-control-input" id="exportPDF" type="radio"
                                                        name="exportFormat" value="pdf">
                                                    <label class="custom-control-label" for="exportPDF">
                                                        <i class="fas fa-file-pdf me-2 text-danger"></i>PDF document
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <h6 class="dropdown-label text-dark mb-2">Dibuat pada</h6>
                                                <div class="row">
                                                    <div class="col-6">
                                                        <input type="date" class="form-control form-control-sm"
                                                            id="exportDateFrom" placeholder="Dari">
                                                    </div>
                                                    <div class="col-6">
                                                        <input type="date" class="form-control form-control-sm"
                                                            id="exportDateTo" placeholder="Sampai">
                                                    </div>
                                                </div>
                                                <small class="text-muted d-block mt-1">Kosongkan untuk mengekspor semua
                                                    tanggal</small>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center pt-2 border-top">
                                                <small class="text-muted mt-2">Board:
                                                    <strong>{{ $board->title }}</strong></small>
                                                <div class="text-end">
                                                    <button type="button" class="btn btn-sm btn-primary mt-4"
                                                        id="exportBoardBtn">
                                                        <i class="fas fa-download me-1"></i>Ekspor
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @php
                        // Determine if image_path is a custom image or hex color
                        $isCustomImage =
                            $board->image_path &&
                            (str_contains($board->image_path, '/') || str_contains($board->image_path, '\\'));
                        $isHexColor = $board->image_path && str_starts_with($board->image_path, '#');

                        if ($isCustomImage) {
                            $backgroundStyle =
                                'background-image: url(' .
                                asset('storage/' . $board->image_path) .
                                '); background-size: cover; background-position: center; background-attachment: scroll;';
                        } elseif ($isHexColor) {
                            $backgroundStyle = 'background-color: ' . $board->image_path . ';';
                        } else {
                            $backgroundStyle = 'background-color: #1e8c94;'; // fallback to primary color
                        }
                    @endphp
                    <div class="board-body p-0" style="{{ $backgroundStyle }}">
                        <div class="kanban-columns">

                            {{-- Dynamic Lists from Database --}}
                            @forelse($lists as $list)
                                @php
                                    $isAdmin = $current_user_role === 'admin';
                                @endphp
                                <div class="kanban-column" data-list-id="{{ $list->id }}"
                                    data-board-id="{{ $board->id }}">
                                    <div class="column-container">
                                        <div
                                            class="column-header {{ $current_user_role !== 'admin' ? 'non-draggable' : '' }}">
                                            <p class="column-title-display">{{ $list->title }}</p>
                                            <input type="text" class="d-none column-title-input column-title-edit"
                                                value="{{ $list->title }}" data-list-id="{{ $list->id }}"
                                                onblur="updateListTitle(this)"
                                                onkeydown="handleListTitleKeydown(event, this)">
                                            <div class="list-action-dropdown dropdown dropstart">
                                                <button class="list-action-btn" type="button"
                                                    id="listActionDropdownBtn-{{ $list->id }}"
                                                    data-bs-toggle="dropdown" aria-expanded="false">
                                                    <i class="fas fa-ellipsis-h"></i>
                                                </button>
                                                <ul class="dropdown-menu"
                                                    aria-labelledby="listActionDropdownBtn-{{ $list->id }}"
                                                    data-bs-popper="static" data-bs-offset="0,10">
                                                    <div class="dropdown-header text-center">
                                                        <h5 class="dropdown-title fw-bold">
                                                            Aksi List
                                                        </h5>
                                                    </div>
                                                    @if ($isAdmin)
                                                        <li class="mt-2">
                                                            <a class="dropdown-item text-dark d-flex justify-content-between align-items-center"
                                                                href="#"
                                                                onclick="event.preventDefault(); event.stopPropagation(); archiveList({{ $list->id }})"
                                                                id="archive-list-btn-{{ $list->id }}">
                                                                <span>
                                                                    <i class="fas fa-archive me-2"></i>Arsipkan list
                                                                </span>
                                                                <i class="fas fa-spinner fa-spin d-none" role="status"
                                                                    id="archive-list-spinner-{{ $list->id }}"
                                                                    style="width: 1rem; height: 1rem;">
                                                                    <span class="visually-hidden">Loading...</span>
                                                                </i>
                                                            </a>
                                                        </li>

                                                        @php
                                                            $hasMovable =
                                                                isset($movable_boards) && $movable_boards->count() > 0;
                                                        @endphp

                                                        <li class="mt-2">
                                                            <a class="dropdown-item text-dark {{ $hasMovable ? '' : 'disabled' }}"
                                                                href="#"
                                                                onclick="{{ $hasMovable ? 'openMoveListModal(' . $list->id . ')' : 'event.preventDefault();' }}"
                                                                aria-disabled="{{ $hasMovable ? 'false' : 'true' }}"
                                                                style="{{ $hasMovable ? '' : 'opacity:0.6; pointer-events:none;' }}">
                                                                <i class="fas fa-arrows-alt me-2"></i>Pindahkan list ini ke
                                                                board lain
                                                            </a>
                                                        </li>

                                                        <li class="mt-2">
                                                            <a class="dropdown-item text-dark {{ $hasMovable ? '' : 'disabled' }}"
                                                                href="#"
                                                                onclick="{{ $hasMovable ? 'openMoveCardFromListModal(' . $list->id . ')' : 'event.preventDefault();' }}"
                                                                aria-disabled="{{ $hasMovable ? 'false' : 'true' }}"
                                                                style="{{ $hasMovable ? '' : 'opacity:0.6; pointer-events:none;' }}">
                                                                <i class="fas fa-external-link-alt me-2"></i>Pindahkan card
                                                                ke board lain
                                                            </a>
                                                        </li>
                                                        <li class="mt-2">
                                                            <a class="dropdown-item text-dark" href="#"
                                                                onclick="event.preventDefault(); event.stopPropagation(); openCopyListModal({{ $list->id }}, '{{ addslashes($list->title) }}')">
                                                                <i class="fas fa-copy me-2"></i>Salin list card ke board
                                                                lain
                                                            </a>
                                                        </li>
                                                    @endif
                                                    <li class="mt-2">
                                                        <a class="dropdown-item text-dark" href="#"
                                                            onclick="event.preventDefault(); event.stopPropagation(); openSortListModal({{ $list->id }})">
                                                            <i class="fas fa-sort-amount-down me-2"></i>Urutkan list
                                                            berdasarkan..
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div id="list-{{ $list->id }}-cards" class="cards-container"
                                            data-list-id="{{ $list->id }}">

                                            {{-- Dynamic Cards for this List --}}
                                            @foreach ($cards_by_list[$list->id] ?? [] as $card)
                                                @php
                                                    // Determine card border color based on due date
                                                    $borderColor = 'blue';
                                                    if ($card->due_date) {
                                                        $dueDate = \Carbon\Carbon::parse($card->due_date);
                                                        $now = \Carbon\Carbon::now();
                                                        $daysUntilDue = $now->diffInDays($dueDate, false);

                                                        // If due date has passed (overdue), make it black
                                                        if ($daysUntilDue < 0) {
                                                            $borderColor = 'black';
                                                        }
                                                        // If due date is within 7 days from now, make it red (urgent)
                                                        elseif ($daysUntilDue <= 7) {
                                                            $borderColor = 'red';
                                                        }
                                                        // Otherwise, keep it blue (normal)
                                                    }
                                                    $priority =
                                                        $borderColor === 'black'
                                                            ? 3
                                                            : ($borderColor === 'red'
                                                                ? 2
                                                                : ($borderColor === 'blue'
                                                                    ? 1
                                                                    : 0));
                                                    $isAdmin = $current_user_role === 'admin';
                                                    $cardColor = $card->card_color ?? null;
                                                    $pastelClass =
                                                        $cardColor &&
                                                        in_array(
                                                            $cardColor,
                                                            [
                                                                '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',
                                                            ],
                                                            true,
                                                        )
                                                            ? $cardColor
                                                            : 'task-card-white';
                                                @endphp

                                                <div class="task-card {{ $pastelClass }} {{ !$isAdmin ? 'no-drag' : '' }}"
                                                    data-task-id="{{ $card->id }}"
                                                    data-list-id="{{ $list->id }}"
                                                    data-title="{{ Str::lower($card->title) }}"
                                                    data-created-at="{{ \Carbon\Carbon::parse($card->created_at)->timestamp }}"
                                                    data-due-date="{{ $card->due_date ? \Carbon\Carbon::parse($card->due_date)->timestamp : '' }}"
                                                    data-comments-count="{{ $card->comments_count ?? 0 }}"
                                                    data-attachments-count="{{ $card->attachments_count ?? 0 }}"
                                                    data-priority="{{ $priority }}"
                                                    data-created-by="{{ Str::lower($card->user_create ?? '') }}">
                                                    <div class="task-card-border task-card-border-{{ $borderColor }}">
                                                    </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">
                                                            @if ($card->due_date)
                                                                <div class="task-date">
                                                                    <i class="far fa-clock"></i>
                                                                    <span class="created-date"
                                                                        title="Created at">{{ \Carbon\Carbon::parse($card->created_at)->format('d M y') }}</span>
                                                                    <span class="date-separator">·</span>
                                                                    <span class="due-date"
                                                                        title="Due date">{{ \Carbon\Carbon::parse($card->due_date)->format('d M y') }}</span>
                                                                </div>
                                                            @endif
                                                            <div class="task-stats">
                                                                @if (isset($card->comments_count) && $card->comments_count > 0)
                                                                    <div class="task-stat-item">
                                                                        <i class="far fa-comments"></i>
                                                                        <span>{{ $card->comments_count }}</span>
                                                                    </div>
                                                                @endif
                                                                @if (isset($card->attachments_count) && $card->attachments_count > 0)
                                                                    <div class="task-stat-item">
                                                                        <i class="fas fa-paperclip"></i>
                                                                        <span>{{ $card->attachments_count }}</span>
                                                                    </div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                        @if ($isAdmin)
                                                            <div class="card-action-dropdown dropdown"
                                                                style="position: absolute; top: 8px; right: 8px; z-index: 10;">
                                                                <button class="card-action-btn" type="button"
                                                                    id="cardActionDropdownBtn-{{ $card->id }}"
                                                                    data-bs-toggle="dropdown" data-bs-auto-close="true"
                                                                    aria-expanded="false"
                                                                    onclick="event.stopPropagation();" title="Aksi Card"
                                                                    style="width: 28px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 6px;">
                                                                    <i class="fas fa-ellipsis-h"
                                                                        style="font-size: 14px;"></i>
                                                                </button>
                                                                <ul class="dropdown-menu dropdown-menu-end card-action-menu"
                                                                    aria-labelledby="cardActionDropdownBtn-{{ $card->id }}"
                                                                    data-bs-boundary="viewport"
                                                                    style="min-width: 220px; margin-top: 4px;">
                                                                    <li class="dropdown-header py-1">
                                                                        <h6
                                                                            class="dropdown-title fw-bold text-center mb-0">
                                                                            Aksi Card</h6>
                                                                    </li>
                                                                    <li>
                                                                        <hr class="dropdown-divider my-1">
                                                                    </li>
                                                                    @php
                                                                        $hasMovableBoards =
                                                                            isset($movable_boards) &&
                                                                            $movable_boards->count() > 0;
                                                                    @endphp
                                                                    <li>
                                                                        <a class="dropdown-item text-dark {{ $hasMovableBoards ? '' : 'disabled' }}"
                                                                            href="#"
                                                                            onclick="event.preventDefault(); event.stopPropagation(); {{ $hasMovableBoards ? 'openMoveCardToBoardModal(' . $card->id . ')' : '' }}"
                                                                            style="{{ $hasMovableBoards ? '' : 'opacity:0.6; pointer-events:none;' }}">
                                                                            <i
                                                                                class="fas fa-external-link-alt me-2"></i>Pindahkan
                                                                            ke Board Lain
                                                                        </a>
                                                                    </li>
                                                                    <li>
                                                                        <a class="dropdown-item text-dark {{ $hasMovableBoards ? '' : 'disabled' }}"
                                                                            href="#"
                                                                            onclick="event.preventDefault(); event.stopPropagation(); {{ $hasMovableBoards ? 'openCopyCardToBoardModal(' . $card->id . ')' : '' }}"
                                                                            style="{{ $hasMovableBoards ? '' : 'opacity:0.6; pointer-events:none;' }}">
                                                                            <i class="fas fa-copy me-2"></i>Salin ke Board
                                                                            Lain
                                                                        </a>
                                                                    </li>
                                                                    <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();">
                                                                            <button type="button"
                                                                                class="card-color-quick-swatch task-card-white {{ $pastelClass === 'task-card-white' ? 'selected' : '' }}"
                                                                                onclick="setCardColorFromMenu({{ $card->id }}, 'task-card-white', event)"
                                                                                title="Putih"></button>
                                                                            <button type="button"
                                                                                class="card-color-quick-swatch task-card-pastel-1 {{ $pastelClass === 'task-card-pastel-1' ? 'selected' : '' }}"
                                                                                onclick="setCardColorFromMenu({{ $card->id }}, 'task-card-pastel-1', event)"
                                                                                title="Pastel 1"></button>
                                                                            <button type="button"
                                                                                class="card-color-quick-swatch task-card-pastel-2 {{ $pastelClass === 'task-card-pastel-2' ? 'selected' : '' }}"
                                                                                onclick="setCardColorFromMenu({{ $card->id }}, 'task-card-pastel-2', event)"
                                                                                title="Pastel 2"></button>
                                                                            <button type="button"
                                                                                class="card-color-quick-swatch task-card-pastel-3 {{ $pastelClass === 'task-card-pastel-3' ? 'selected' : '' }}"
                                                                                onclick="setCardColorFromMenu({{ $card->id }}, 'task-card-pastel-3', event)"
                                                                                title="Pastel 3"></button>
                                                                            <button type="button"
                                                                                class="card-color-quick-swatch task-card-pastel-4 {{ $pastelClass === 'task-card-pastel-4' ? 'selected' : '' }}"
                                                                                onclick="setCardColorFromMenu({{ $card->id }}, 'task-card-pastel-4', event)"
                                                                                title="Pastel 4"></button>
                                                                            <button type="button"
                                                                                class="card-color-quick-swatch task-card-pastel-5 {{ $pastelClass === 'task-card-pastel-5' ? 'selected' : '' }}"
                                                                                onclick="setCardColorFromMenu({{ $card->id }}, 'task-card-pastel-5', event)"
                                                                                title="Pastel 5"></button>
                                                                            <button type="button"
                                                                                class="card-color-quick-swatch task-card-pastel-6 {{ $pastelClass === 'task-card-pastel-6' ? 'selected' : '' }}"
                                                                                onclick="setCardColorFromMenu({{ $card->id }}, 'task-card-pastel-6', event)"
                                                                                title="Pastel 6"></button>
                                                                        </div>
                                                                    </li>
                                                                    <li>
                                                                        <hr class="dropdown-divider my-1">
                                                                    </li>
                                                                    <li>
                                                                        <a class="dropdown-item text-danger d-flex justify-content-between align-items-center"
                                                                            href="#"
                                                                            onclick="event.preventDefault(); event.stopPropagation(); archiveCard({{ $card->id }})"
                                                                            id="archive-card-btn-{{ $card->id }}">
                                                                            <span>
                                                                                <i class="fas fa-archive me-2"></i>Arsipkan
                                                                                Card
                                                                            </span>
                                                                            <i class="fas fa-spinner fa-spin d-none"
                                                                                role="status"
                                                                                id="archive-card-spinner-{{ $card->id }}"
                                                                                style="width: 1rem; height: 1rem;">
                                                                                <span
                                                                                    class="visually-hidden">Loading...</span>
                                                                            </i>
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                        {{-- Add Card Button --}}
                                        <div class="add-card" onclick="openCreateCardModal({{ $list->id }})">
                                            <small class="add-card-text"><i class="fas fa-plus me-2"></i>Tambah card
                                                baru</small>
                                        </div>
                                    </div>
                                </div>
                            @empty
                            @endforelse

                            {{-- Add New List Column (only for admins) --}}
                            @if ($current_user_role === 'admin')
                                <div class="kanban-column">
                                    <div class="add-list" id="add-list-btn" onclick="addNewList()">
                                        <div class="add-list-content">
                                            <small class="add-list-text"><i class="fas fa-plus me-2"></i>Tambah list
                                                baru</small>
                                        </div>
                                    </div>
                                    <div class="add-list-form" id="add-list-form" style="display: none;">
                                        <div class="form-container">
                                            <input type="text" id="list-title-input" class="list-title-input"
                                                placeholder="Masukkan judul list..." autocomplete="off">
                                            <div class="form-actions">
                                                <button type="button" class="btn-add-list"
                                                    onclick="createNewList()">Tambah List</button>
                                                <button type="button" class="btn-cancel-list"
                                                    onclick="cancelAddList()">×</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('pages.boards.modals.add-card')
    @include('pages.boards.modals.view-card')

    <!-- Sort List Modal -->
    <div class="modal fade" id="sortListModal" tabindex="-1" aria-labelledby="sortListModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header py-2">
                    <h6 class="modal-title" id="sortListModalLabel">Urutkan list</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2">
                    <div class="mb-2">
                        <label class="form-label mb-1">Kriteria</label>
                        <select id="sortCriteria" class="form-select form-select-sm">
                            <option value="title">Judul (A → Z / Z → A)</option>
                            <option value="created_at">Tanggal Dibuat (Terbaru/Terlama)</option>
                            <option value="due_date">Deadline (Terdekat/Terjauh)</option>
                            <option value="comments">Komentar (Paling/Berita)</option>
                            <option value="attachments">Lampiran (Paling/Sedikit)</option>
                            <option value="priority">Prioritas (Tinggi/Rendah)</option>
                            <option value="created_by">Pembuat Card (A → Z / Z → A)</option>
                        </select>
                    </div>
                    <div class="mb-2">
                        <label class="form-label mb-1">Urutan</label>
                        <div class="d-flex gap-3">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="sortOrder" id="sortAsc"
                                    value="asc" checked>
                                <label class="form-check-label" for="sortAsc">Naik</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="sortOrder" id="sortDesc"
                                    value="desc">
                                <label class="form-check-label" for="sortDesc">Turun</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" id="persistSort">
                        <label class="form-check-label" for="persistSort">
                            Simpan urutan ke server
                        </label>
                    </div>
                </div>
                <div class="modal-footer py-2">
                    <button type="button" class="btn btn-sm btn-outline-secondary"
                        data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-sm btn-primary"
                        onclick="applySortFromModal()">Terapkan</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Copy List Modal -->
    <div class="modal fade" id="copyListModal" tabindex="-1" aria-labelledby="copyListModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header py-2">
                    <h6 class="modal-title" id="copyListModalLabel"><i class="fas fa-copy me-2"></i>Salin List</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2">
                    <input type="hidden" id="copyListSourceId" value="">
                    <div class="mb-3">
                        <label class="form-label mb-1 fw-semibold">Nama list baru</label>
                        <input type="text" class="form-control form-control-sm" id="copyListTitle"
                            placeholder="Nama list...">
                    </div>
                    <div class="mb-3">
                        <label class="form-label mb-1 fw-semibold">Board tujuan</label>
                        <select class="form-select form-select-sm" id="copyListBoardSelect">
                            <option value="{{ $board->id }}">{{ $board->title }} (Board ini) —
                                {{ $board->user_create === session('username') ? 'Owner' : ucfirst($current_user_role ?? 'member') }}
                            </option>
                            @foreach ($movable_boards ?? [] as $mb)
                                @if ($mb->id != $board->id)
                                    <option value="{{ $mb->id }}">{{ $mb->title }} —
                                        {{ ucfirst($mb->user_role ?? 'member') }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="checkbox" id="copyListWithCards" checked>
                        <label class="form-check-label" for="copyListWithCards">
                            Sertakan semua card
                        </label>
                    </div>
                </div>
                <div class="modal-footer py-2">
                    <button type="button" class="btn btn-sm btn-outline-secondary"
                        data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-sm btn-primary" id="confirmCopyListBtn"
                        onclick="executeCopyList()">
                        <i class="fas fa-copy me-1"></i> Salin
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Move List Modal -->
    <div class="modal fade" id="moveListModal" tabindex="-1" aria-labelledby="moveListModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header py-2">
                    <h6 class="modal-title" id="moveListModalLabel">Pindah list ke board lain</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2">
                    <div class="mb-2">
                        <label class="form-label mb-1">Board tujuan</label>
                        <select id="moveListBoardSelect" class="form-select form-select-sm">
                            @forelse ($movable_boards ?? [] as $mb)
                                <option value="{{ $mb->id }}">{{ $mb->title }}</option>
                            @empty
                                <option value="" disabled>Tidak ada board yang tersedia</option>
                            @endforelse
                        </select>
                        <small class="text-muted d-block mt-1">List akan ditempatkan di bagian akhir.</small>
                    </div>
                </div>
                <div class="modal-footer py-2">
                    <button type="button" class="btn btn-sm btn-outline-secondary"
                        data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-sm btn-primary" id="confirmMoveListBtn"
                        onclick="submitMoveList()">Pindah</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Move Card to Another Board Modal -->
    <div class="modal fade" id="moveCardToBoardModal" tabindex="-1" aria-labelledby="moveCardToBoardModalLabel"
        aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header py-2">
                    <h6 class="modal-title" id="moveCardToBoardModalLabel">Pindah card ke board lain</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2">
                    <div class="mb-3">
                        <label class="form-label mb-1">Card yang akan dipindahkan</label>
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <small class="text-muted"><span id="selectedCardCount">0</span> card dipilih</small>
                            <div>
                                <button type="button" class="btn btn-link btn-sm p-0 me-2"
                                    onclick="selectAllCards()">Pilih Semua</button>
                                <button type="button" class="btn btn-link btn-sm p-0 text-secondary"
                                    onclick="deselectAllCards()">Hapus Semua</button>
                            </div>
                        </div>
                        <div class="mb-2">
                            <input type="text" id="moveCardSearchInput" class="form-control form-control-sm"
                                placeholder="Cari card..." oninput="filterMoveCardList()">
                        </div>
                        <div id="moveCardCheckboxList" class="border rounded p-2"
                            style="max-height: 200px; overflow-y: auto;">
                            <!-- Cards checkbox will be populated here -->
                            <div class="text-muted text-center py-2">Tidak ada card</div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label mb-1">Board tujuan</label>
                        <select id="moveCardBoardSelect" class="form-select form-select-sm"
                            onchange="loadTargetBoardLists()">
                            <option value="" disabled selected>Pilih board tujuan...</option>
                            @forelse ($movable_boards ?? [] as $mb)
                                <option value="{{ $mb->id }}">{{ $mb->title }}</option>
                            @empty
                                <option value="" disabled>Tidak ada board yang tersedia</option>
                            @endforelse
                        </select>
                    </div>
                    <div class="mb-2">
                        <label class="form-label mb-1">List tujuan</label>
                        <select id="moveCardListSelect" class="form-select form-select-sm" disabled>
                            <option value="" disabled selected>Pilih board terlebih dahulu...</option>
                        </select>
                        <small class="text-muted d-block mt-1">Card akan ditempatkan di bagian bawah list.</small>
                    </div>
                </div>
                <div class="modal-footer py-2">
                    <button type="button" class="btn btn-sm btn-outline-secondary"
                        data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-sm btn-primary" id="confirmMoveCardToBoardBtn"
                        onclick="submitMoveCardToBoard()" disabled>
                        <span class="btn-text">Pindahkan</span>
                        <span class="btn-loading d-none"><i class="fas fa-spinner fa-spin me-1"></i>Memindahkan...</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Copy Card to Another Board Modal --}}
    <div class="modal fade" id="copyCardToBoardModal" tabindex="-1" aria-labelledby="copyCardToBoardModalLabel"
        aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header py-2">
                    <h6 class="modal-title" id="copyCardToBoardModalLabel">Salin card ke board lain</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2">
                    <div class="mb-3">
                        <label class="form-label mb-1">Card yang akan disalin</label>
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <small class="text-muted"><span id="selectedCopyCardCount">0</span> card dipilih</small>
                            <div>
                                <button type="button" class="btn btn-link btn-sm p-0 me-2"
                                    onclick="selectAllCopyCards()">Pilih Semua</button>
                                <button type="button" class="btn btn-link btn-sm p-0 text-secondary"
                                    onclick="deselectAllCopyCards()">Hapus Semua</button>
                            </div>
                        </div>
                        <div class="mb-2">
                            <input type="text" id="copyCardSearchInput" class="form-control form-control-sm"
                                placeholder="Cari card..." oninput="filterCopyCardList()">
                        </div>
                        <div id="copyCardCheckboxList" class="border rounded p-2"
                            style="max-height: 200px; overflow-y: auto;">
                            <!-- Cards checkbox will be populated here -->
                            <div class="text-muted text-center py-2">Tidak ada card</div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label mb-1">Board tujuan</label>
                        <select id="copyCardBoardSelect" class="form-select form-select-sm"
                            onchange="loadCopyTargetBoardLists()">
                            <option value="" disabled selected>Pilih board tujuan...</option>
                            @forelse ($movable_boards ?? [] as $mb)
                                <option value="{{ $mb->id }}">{{ $mb->title }}</option>
                            @empty
                                <option value="" disabled>Tidak ada board yang tersedia</option>
                            @endforelse
                        </select>
                    </div>
                    <div class="mb-2">
                        <label class="form-label mb-1">List tujuan</label>
                        <select id="copyCardListSelect" class="form-select form-select-sm" disabled>
                            <option value="" disabled selected>Pilih board terlebih dahulu...</option>
                        </select>
                        <small class="text-muted d-block mt-1">Card akan ditempatkan di bagian bawah list.</small>
                    </div>
                    <div class="mb-2">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="copyCardWithComments" checked>
                            <label class="form-check-label" for="copyCardWithComments">
                                Sertakan komentar
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="copyCardWithAttachments" checked>
                            <label class="form-check-label" for="copyCardWithAttachments">
                                Sertakan lampiran
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="copyCardWithChecklists" checked>
                            <label class="form-check-label" for="copyCardWithChecklists">
                                Sertakan checklist
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="copyCardWithDeadline" checked>
                            <label class="form-check-label" for="copyCardWithDeadline">
                                Sertakan deadline
                            </label>
                        </div>
                    </div>
                    {{-- Warning when target board has fewer members --}}
                    <div id="copyCardMemberWarning" class="alert alert-warning py-2 px-3 mb-2 d-none" role="alert">
                        <i class="fas fa-exclamation-triangle me-1"></i>
                        <small>Board tujuan memiliki lebih sedikit anggota. Beberapa member card mungkin tidak akan
                            disalin.</small>
                    </div>
                </div>
                <div class="modal-footer py-2">
                    <button type="button" class="btn btn-sm btn-outline-secondary"
                        data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-sm btn-success" id="confirmCopyCardToBoardBtn"
                        onclick="checkMembersBeforeCopy()" disabled>
                        <span class="btn-text">Salin</span>
                        <span class="btn-loading d-none"><i class="fas fa-spinner fa-spin me-1"></i>Memeriksa...</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Copy Card Warning Modal --}}
    <div class="modal fade" id="copyCardWarningModal" tabindex="-1" aria-labelledby="copyCardWarningModalLabel"
        aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-dialog-centered" style="max-width: 400px;">
            <div class="modal-content border-0 shadow-lg" style="border-radius: 12px; overflow: hidden;">
                <div class="modal-header bg-warning py-3 border-0">
                    <h6 class="modal-title text-dark fw-bold mb-0" id="copyCardWarningModalLabel">
                        <i class="fas fa-exclamation-triangle me-2"></i>Peringatan
                    </h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body py-4 px-4">
                    <p class="mb-3 text-center" style="font-size: 15px;">
                        Anda akan menyalin <strong id="copyWarningCardCount">0</strong> card ke board
                        <strong id="copyWarningBoardName" class="text-primary">-</strong>.
                    </p>

                    <div id="copyWarningMemberInfo" class="d-none">
                        <hr class="my-3">
                        <div class="bg-light rounded p-3 mb-3">
                            <p class="fw-bold mb-2 small text-dark">
                                <i class="fas fa-user-times me-1"></i> Anggota yang tidak akan disalin:
                            </p>
                            <div id="copyWarningMemberList" class="d-flex flex-wrap gap-2">
                                <!-- Member badges will be added here dynamically -->
                            </div>
                            <p class="text-muted small mb-0 mt-2 fst-italic" id="copyWarningMemberReason">
                                <i class="fas fa-info-circle me-1"></i>
                                Anggota ini belum terdaftar di board tujuan.
                            </p>
                        </div>
                    </div>

                    <p class="text-muted text-center small mb-0 mt-3">Apakah Anda yakin ingin melanjutkan?</p>
                </div>
                <div class="modal-footer border-0 pt-0 pb-4 px-4 justify-content-center gap-2">
                    <button type="button" class="btn btn-outline-secondary px-4" data-bs-dismiss="modal">
                        Batal
                    </button>
                    <button type="button" class="btn btn-warning px-4" id="confirmCopyWarningBtn"
                        onclick="executeCopyCardToBoard()">
                        <span class="btn-text">Lanjutkan Salin</span>
                        <span class="btn-loading d-none"><i class="fas fa-spinner fa-spin me-1"></i>Menyalin...</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Add member confirmation modal --}}
    <div class="modal fade" id="addMemberModal" tabindex="-1" aria-labelledby="addMemberModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-primary justify-content-center position-relative">
                    <h5 class="modal-title fw-bold text-white" id="addMemberModalLabel">
                        Tambah Anggota
                    </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">
                    <div class="text-center mb-3">
                        <img id="addMemberAvatar" src="" alt="" class="rounded-circle mb-3"
                            style="width: 80px; height: 80px; object-fit: cover;">
                        <h6 class="mb-1" id="addMemberName"></h6>
                        <p class="text-muted small mb-0" id="addMemberEmail"></p>
                    </div>
                    <p class="text-center mb-0">
                        Apakah Anda ingin menambah <strong id="addMemberNameConfirm"></strong> ke board ini?
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary" id="confirmAddMemberBtn">
                        <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>

    {{-- Remove member confirmation modal --}}
    <div class="modal fade" id="removeMemberModal" tabindex="-1" aria-labelledby="removeMemberModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger justify-content-center position-relative">
                    <h5 class="modal-title fw-bold text-white" id="removeMemberModalLabel">
                        Hapus Anggota
                    </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">
                    <div class="text-center mb-3">
                        <img id="removeMemberAvatar" src="" alt="" class="rounded-circle mb-3"
                            style="width: 80px; height: 80px; object-fit: cover;">
                        <h6 class="mb-1" id="removeMemberName"></h6>
                        <p class="text-muted small mb-0" id="removeMemberEmail"></p>
                    </div>
                    <p class="text-center mb-0">
                        Apakah Anda ingin menghapus <strong id="removeMemberNameConfirm"></strong> dari board ini?
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-danger" id="confirmRemoveMemberBtn">
                        <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>
@endsection

@push('css')
    <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;
        }

        .board {
            overflow-x: auto;
            scrollbar-color: rgba(52, 71, 103, 0.3) rgba(241, 243, 244, 0.4);
        }

        /* Main Board Styling - Rounded Container */
        .board.rounded-lg {
            border-radius: 15px !important;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            border: none;
            overflow: visible;
            position: relative;
            z-index: 1;
        }

        /* Board Header Equal Margins */
        .board-header {
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            background: #fff;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            position: relative;
            z-index: 2;
        }

        .board-body {
            overflow-x: auto;
            border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;
            position: relative;
            z-index: 1;
            height: 100vh;
            background-size: cover !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
            touch-action: pan-x pan-y;
            -webkit-overflow-scrolling: touch;
        }

        .board-header .d-flex {
            height: 32px;
            display: flex;
            align-items: center;
        }

        .board-header h6 {
            line-height: 1.2;
            margin: 0;
        }

        /* Action Buttons Styling */
        .action-buttons {
            display: flex;
            gap: 5px;
            align-items: center;
        }

        .action-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border: 0px solid;
            background: #ffffff;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
        }

        .dropdown-subheader {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            margin-left: -7px;
            background: #F0F8FF;
        }

        .dropdown-subheader .dropdown-title {
            font-size: 14px;
            color: #028284;
        }

        .action-btn:hover {
            background: var(--gray-100);
            transition: all 0.2s ease;
        }

        .list-action-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border: 0px solid;
            background: var(--gray-100);
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
        }

        .list-action-btn:hover {
            background: var(--gray-200);
            transition: all 0.2s ease;
        }

        .card-action-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 28px;
            height: 28px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            opacity: 0;
            transition: all 0.2s ease;
            z-index: 2;
        }

        .task-card:hover .card-action-btn {
            transition: all 0.2s ease;
            opacity: 1;
        }

        .card-action-btn:hover {
            background: #fff;
            border-color: rgba(0, 0, 0, 0.2);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        /* Card action dropdown positioning */
        .card-action-menu {
            z-index: 1050;
        }

        .card-action-menu.dropdown-menu-up {
            top: auto !important;
            bottom: 100% !important;
            transform: none !important;
            margin-bottom: 5px !important;
        }

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

        .card-color-quick-swatch {
            width: 100%;
            height: 24px;
            border: 2px solid #cbd3df;
            border-radius: 6px;
            cursor: pointer;
            background: var(--task-card-bg, #ffffff);
            transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
        }

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

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

        .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: 14px;
        }

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

        .action-btn.dropdown-toggle::after {
            display: none !important;
        }

        .action-btn.dropdown-open,
        .action-btn.dropdown-open:hover {
            background: var(--gray-100);
        }

        /* Kanban Board Styles */
        .kanban-column {
            flex-shrink: 0;
            width: 320px;
            position: relative;
            overflow: visible !important;
        }

        .column-container {
            background: var(--gray-100);
            border-radius: 8px;
            padding: 12px;
            border: 1px solid var(--gray-200);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            max-height: calc(100vh - 50px);
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 1;
            overflow: visible !important;
        }

        .column-header {
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
            flex-shrink: 0;
        }

        .column-header.non-draggable {
            cursor: default;
        }

        .column-title-display {
            border: 1px solid transparent;
            background: transparent;
            font-size: 17px;
            font-weight: 700;
            color: var(--gray-900);
            letter-spacing: 0.025em;
            outline: none;
            width: 100%;
            border-radius: 6px;
            margin: 1px 7px;
            text-align: center;
            text-transform: uppercase;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            box-sizing: border-box;
        }

        .column-title-input {
            border: 1px solid transparent;
            background: transparent;
            font-size: 14px;
            font-weight: 600;
            color: var(--gray-900);
            letter-spacing: 0.025em;
            outline: none;
            width: 100%;
            border-radius: 6px;
            box-sizing: border-box;
            resize: none;
            margin: 0 5px;
        }

        .column-title-input:focus {
            border: 1px solid var(--primary);
            background: #ffff;
        }

        /* Cards container grows with content */

        .card-action-dropdown .dropdown-menu {
            z-index: 99999 !important;
            width: 220px;
            font-size: 14px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
            border-radius: 8px;
            border: 1px solid var(--gray-300);
            transition: none !important;
            position: absolute !important;
            will-change: transform;
        }

        .card-action-dropdown {
            position: absolute;
            top: 8px;
            right: 8px;
            z-index: 10;
        }

        .card-action-dropdown .dropdown-menu::before,
        .card-action-dropdown .dropdown-menu::after {
            display: none !important;
            content: none !important;
        }

        .cards-container {
            display: flex;
            flex-direction: column;
            gap: 12px;
            overflow-y: auto;
            overflow-x: visible !important;
            margin-bottom: 12px;
            scrollbar-color: rgba(52, 71, 103, 0.3) rgba(241, 243, 244, 0.4);
            touch-action: pan-y;
        }

        .cards-container.scrollable {
            overflow-y: auto;
            padding-right: 6px;
            margin-right: -8px;
            touch-action: pan-y;
        }

        .card-archive-btn {
            position: absolute;
            top: 40px;
            right: 10px;
            z-index: 3;
        }

        .board-title-display {
            cursor: pointer;
            border: 1px solid transparent;
            background: transparent;
            font-size: 16px;
            font-weight: bolder;
            color: var(--gray-900);
            letter-spacing: 0.025em;
            outline: none;
            width: auto;
            border-radius: 6px;
        }

        .board-title-display.non-draggable {
            cursor: default;
        }

        .board-title-input {
            border: 1px solid transparent;
            background: transparent;
            font-size: 16px;
            font-weight: bolder;
            color: var(--gray-900);
            letter-spacing: 0.025em;
            outline: none;
            width: auto;
            border-radius: 6px;
            box-sizing: border-box;
            resize: none;
        }

        .board-title-input:focus {
            border: 1px solid var(--primary);
            background: #fff;
        }

        .kanban-columns {
            display: flex;
            gap: 16px;
            padding: 16px;
            position: relative;
            z-index: 1;
            min-width: max-content;
            overflow: visible !important;
            touch-action: inherit;
        }

        .kanban-columns.dragging {
            cursor: grabbing;
        }

        .add-card,
        .add-list {
            cursor: pointer;
            border: 2px dashed var(--gray-400);
            background-color: var(--gray-100);
            border-radius: 8px;
            text-align: center;
            padding: 5px;
            order: 999;
        }

        .add-card:hover,
        .add-list:hover {
            border-color: var(--gray-500);
            transition: all 0.2s ease;
        }

        /* Task Card Design */
        .task-card {
            background: var(--task-card-bg, #ffffff);
            border-radius: 10px;
            cursor: pointer;
            position: relative;
            border: 2px solid transparent;
            touch-action: manipulation;
        }

        .task-card-white {
            --task-card-bg: #ffffff;
        }

        .task-card-pastel-1 {
            --task-card-bg: #fff4e6;
        }

        .task-card-pastel-2 {
            --task-card-bg: #fef7cd;
        }

        .task-card-pastel-3 {
            --task-card-bg: #e6f4ea;
        }

        .task-card-pastel-4 {
            --task-card-bg: #e8f1ff;
        }

        .task-card-pastel-5 {
            --task-card-bg: #f4ecff;
        }

        .task-card-pastel-6 {
            --task-card-bg: #ffecee;
        }

        .task-card:hover {
            border: 2px solid var(--gray-700);
            transition: all 0.2s ease;
        }

        .task-card-border {
            height: 15px;
            width: 100%;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }

        .task-card-border-red {
            background: #ff4d4f;
        }

        .task-card-border-blue {
            background: #1890ff;
        }

        .task-card-border-black {
            background: #262626;
        }

        .task-card-border-green {
            background: #52c41a;
        }

        .task-card-content {
            padding: 16px;
            position: relative;
        }

        .task-user {
            font-size: 11px;
            font-weight: bold;
            color: var(--gray-900);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }

        .task-title {
            font-size: 14px;
            font-weight: 500;
            color: var(--gray-900);
            line-height: 1.4;
            margin-bottom: 16px;
            text-transform: uppercase;
            word-break: break-word;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        .task-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .task-date {
            display: flex;
            align-items: center;
            font-size: 12px;
            color: var(--gray-700);
            gap: 6px;
        }

        .task-date .created-date {
            color: var(--gray-700);
            font-weight: 400;
        }

        .task-date .due-date {
            color: var(--gray-900);
            font-weight: 600;
        }

        .task-date .date-separator {
            color: var(--gray-700);
            margin: 0 2px;
            font-size: 13px;
            font-weight: bold;
        }

        .task-stats {
            display: flex;
            gap: 16px;
        }

        .task-stat-item {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            color: var(--gray-700);
        }

        .task-stat-item i {
            font-size: 11px;
        }

        /* Add List Form Styles */
        .add-list-form {
            min-width: 320px;
            flex-shrink: 0;
            width: 320px;
        }

        .form-container {
            background: var(--gray-100);
            border-radius: 8px;
            padding: 10px;
            border: 1px solid var(--gray-300);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .list-title-input {
            width: 100%;
            padding: 4px 7px;
            border: 2px solid var(--gray-300);
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            background: #ffffff;
            margin-bottom: 12px;
            outline: none;
        }

        .list-title-input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
            transition: border-color 0.2s ease;
        }

        .form-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .btn-add-list {
            background: var(--primary);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
        }

        .btn-add-list:hover {
            background: var(--primary-dark);
            transition: background-color 0.2s ease;
        }

        .btn-cancel-list {
            background: var(--gray-100);
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 6px;
            font-size: 30px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn-cancel-list:hover {
            background: var(--gray-200);
            transition: background-color 0.2s ease;
        }

        /* SortableJS Styles */
        .sortable-ghost {
            opacity: 0.4;
            background: var(--gray-100);
            border-radius: 10px;
        }

        .sortable-chosen {
            z-index: 999;
        }

        .sortable-drag {
            border: none !important;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
            opacity: 0.95;
        }

        .kanban-column.sortable-ghost {
            height: fit-content;
            min-height: unset;
        }

        .kanban-column.sortable-chosen {
            height: fit-content;
            min-height: unset;
        }

        /* Archived Card Styles */
        .list-action-dropdown .dropdown-menu {
            z-index: 99999 !important;
            width: 250px;
            font-size: 14px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
            transition: none !important;
            animation: none !important;
        }

        .list-action-dropdown .dropdown-menu::before,
        .list-action-dropdown .dropdown-menu::after {
            display: none !important;
            content: none !important;
        }

        .list-action-dropdown.dropstart .dropdown-menu {
            top: 0 !important;
            transform: translateY(-2px) !important;
        }

        .archived-card {
            background: var(--gray-100);
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 4px;
            cursor: pointer;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            position: relative;
            order: 1;
        }

        .archived-card:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            transition: all 0.2s ease;
        }

        .archived-card-content {
            padding: 16px;
        }

        .archived-action-link {
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .archived-action-link:hover {
            color: var(--link);
            text-decoration: underline;
        }

        .archived-list {
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            padding-bottom: 10px;
        }

        .filter-dropdown .custom-control-label {
            font-size: 14px;
            font-weight: normal;
        }

        .export-dropdown .custom-control-label {
            font-size: 14px;
            font-weight: normal;
        }

        /* Filter button active state */
        .action-btn.active-filter {
            background-color: #1171ef !important;
            color: white !important;
            box-shadow: 0 0 0 2px rgba(17, 113, 239, 0.3) !important;
        }

        /* Custom checkbox styling for filters */
        .filter-dropdown .custom-control-input:checked~.custom-control-label::before {
            background-color: #1171ef;
            border-color: #1171ef;
        }

        /* Animation for filtered cards */
        .task-card {
            transition: all 0.3s ease;
        }

        .task-card.filtered-out {
            opacity: 0;
            transform: scale(0.8);
            pointer-events: none;
        }

        .label-chip {
            display: inline-block;
            padding: 2px 12px;
            border-radius: 12px;
            color: #fff;
            font-size: 13px;
            font-weight: 600;
            margin-left: 4px;
            width: 120px;
        }

        .label-chip-urgent {
            background: #ff4d4f;
        }

        .label-chip-normal {
            background: #1890ff;
        }

        .label-chip-overdue {
            background: #262626;
        }

        .user-role-select {
            cursor: pointer;
            width: 100px;
            font-size: 13px;
            padding: 2px 16px;
        }

        /* User Item Styles */
        .user-item {
            display: flex;
            align-items: center;
            padding: 10px 12px;
            border-radius: 8px;
            margin-bottom: 8px;
            transition: all 0.2s ease;
            gap: 12px;
        }

        .user-item:hover {
            background-color: var(--gray-200);
        }

        /* Non-admin user can't add members */
        .user-item.non-admin-disabled {
            cursor: not-allowed !important;
            opacity: 0.6;
        }

        .user-item.non-admin-disabled:hover {
            background-color: transparent;
        }

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

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

        .user-info h6 {
            margin: 0;
            font-size: 14px;
            font-weight: 600;
            color: var(--gray-900);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .user-info small {
            font-size: 12px;
            color: var(--gray-600);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }

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

        /* Add Member Modal Styles */
        #addMemberModal .btn-text,
        #addMemberModal .btn-loading {
            display: inline-block;
        }

        #addMemberModal .btn-loading.d-none,
        #addMemberModal .btn-text.d-none {
            display: none !important;
        }

        /* Remove Member Modal Styles */
        #removeMemberModal .btn-text,
        #removeMemberModal .btn-loading {
            display: inline-block;
        }

        #removeMemberModal .btn-loading.d-none,
        #removeMemberModal .btn-text.d-none {
            display: none !important;
        }

        /* Role Dropdown Loading State */
        .role-dropdown-btn .role-text,
        .role-dropdown-btn .role-loading {
            display: inline-block;
        }

        .role-dropdown-btn .role-loading.d-none,
        .role-dropdown-btn .role-text.d-none {
            display: none !important;
        }

        .role-dropdown-btn .role-loading {
            color: var(--primary);
        }

        /* Active/Selected Role State */
        .set-role-btn.active {
            background-color: var(--gray-100);
            cursor: default;
        }

        .set-role-btn.active:hover {
            background-color: var(--gray-100);
        }

        .set-role-btn.disabled,
        .set-role-btn.active.disabled {
            pointer-events: none;
        }

        /* Disabled role dropdown button cursor */
        .role-dropdown-btn:disabled,
        .role-dropdown-btn[disabled],
        .role-dropdown-btn:disabled:hover,
        .role-dropdown-btn[disabled]:hover,
        button.role-dropdown-btn:disabled,
        button.role-dropdown-btn[disabled] {
            cursor: not-allowed !important;
            opacity: 0.65;
            pointer-events: auto !important;
        }

        /* Disabled dropdown menu items cursor */
        .dropdown-item.disabled,
        .remove-board-member-btn.disabled {
            cursor: not-allowed !important;
            pointer-events: none;
            opacity: 0.6;
        }

        /* Role dropdown menu positioning */
        .role-dropdown-menu {
            z-index: 99999 !important;
            max-height: 400px;
            overflow-y: auto;
        }

        .role-dropdown {
            position: relative;
        }

        /* Archive List Spinner - Styling untuk spinner loading */
        [id^="archive-list-spinner-"] {
            color: #1e8c94;
            border-color: #1e8c94 transparent #1e8c94 transparent;
        }

        /* Archive List Button - Pastikan alignment bagus */
        [id^="archive-list-btn-"] {
            transition: opacity 0.2s ease;
        }

        [id^="archive-list-btn-"]:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }

        /* Archive Card Spinner - Styling untuk spinner loading */
        [id^="archive-card-spinner-"] {
            color: #1e8c94;
            border-color: #1e8c94 transparent #1e8c94 transparent;
        }

        /* Archive Card Button - Pastikan alignment bagus */
        [id^="archive-card-btn-"] {
            transition: opacity 0.2s ease;
        }

        [id^="archive-card-btn-"]:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }

        /* Restore Card Spinner */
        [id^="restore-card-spinner-"],
        [id^="restore-list-spinner-"] {
            color: #1e8c94;
            border-color: #1e8c94 transparent #1e8c94 transparent;
        }

        /* Delete Card/List Spinner */
        [id^="delete-card-spinner-"],
        [id^="delete-list-spinner-"] {
            color: #dc3545;
            border-color: #dc3545 transparent #dc3545 transparent;
        }

        /* Archived Action Link */
        .archived-action-link {
            transition: opacity 0.2s ease;
        }

        .ps__rail-x,
        .ps__rail-y,
        .ps__thumb-x,
        .ps__thumb-y {
            display: none !important;
        }

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

        /* Tablet (< 992px) */
        @media (max-width: 991.98px) {
            .board-body {
                height: auto;
                min-height: calc(100vh - 200px);
            }

            .lists-container {
                padding: 10px !important;
            }

            .list {
                min-width: 260px !important;
                max-width: 260px !important;
            }

            .card-item {
                padding: 10px !important;
            }
        }

        /* Mobile (< 768px) */
        @media (max-width: 767.98px) {
            .board.rounded-lg {
                border-radius: 8px !important;
                margin: 0 -12px;
            }

            .board-header {
                border-radius: 8px 8px 0 0;
                padding: 8px 12px !important;
            }

            .board-header h6 {
                font-size: 0.9rem;
            }

            .action-buttons {
                gap: 3px;
            }

            .action-btn {
                width: 32px;
                height: 32px;
                font-size: 12px;
            }

            .board-body {
                border-radius: 0 0 8px 8px;
                padding: 8px !important;
            }

            .lists-container {
                gap: 10px !important;
                padding: 5px !important;
            }

            .list {
                min-width: 240px !important;
                max-width: 240px !important;
            }

            .list-header {
                padding: 8px 10px !important;
            }

            .list-title {
                font-size: 0.875rem !important;
            }

            .card-item {
                padding: 8px !important;
                font-size: 0.8125rem;
            }

            .card-action-btn {
                width: 24px;
                height: 24px;
                font-size: 12px;
                opacity: 1;
                background: rgba(255, 255, 255, 0.95);
            }

            /* Filter dan sorting buttons */
            #filterContainer .dropdown-toggle,
            #sortContainer .dropdown-toggle {
                font-size: 0.75rem !important;
                padding: 4px 8px !important;
            }
        }

        /* Very small mobile (< 576px) */
        @media (max-width: 575.98px) {
            .list {
                min-width: 220px !important;
                max-width: 220px !important;
            }

            .card-title {
                font-size: 0.8125rem !important;
            }

            .card-labels {
                gap: 3px !important;
            }

            .card-labels .badge {
                font-size: 0.625rem !important;
                padding: 2px 5px !important;
            }

            /* Due date badge */
            .card-item .badge[class*="bg-"] {
                font-size: 0.625rem !important;
                padding: 2px 5px !important;
            }
        }
    </style>
@endpush

@push('js')
    <script>
        const BOARD_ID = {{ $board->id }};
        const currentUserRole = '{{ $current_user_role }}';
        const currentUserId = '{{ $current_user_id }}';
        const isAdmin = currentUserRole === 'admin';
        let CURRENT_SORT_LIST_ID = null;

        // ===== Copy List Functions =====
        function openCopyListModal(listId, listTitle) {
            document.getElementById('copyListSourceId').value = listId;
            document.getElementById('copyListTitle').value = listTitle + ' (Salinan)';
            document.getElementById('copyListWithCards').checked = true;
            const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('copyListModal'));
            modal.show();
        }

        function executeCopyList() {
            const sourceListId = document.getElementById('copyListSourceId').value;
            const newTitle = document.getElementById('copyListTitle').value.trim();
            const withCards = document.getElementById('copyListWithCards').checked;
            const targetBoardId = document.getElementById('copyListBoardSelect').value;
            const btn = document.getElementById('confirmCopyListBtn');

            if (!newTitle) {
                showAlert('danger', 'Nama list tidak boleh kosong');
                return;
            }

            btn.disabled = true;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Menyalin...';

            fetch('{{ url('/boards/copy-list') }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        list_id: sourceListId,
                        title: newTitle,
                        with_cards: withCards,
                        target_board_id: parseInt(targetBoardId)
                    })
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        bootstrap.Modal.getInstance(document.getElementById('copyListModal')).hide();
                        showAlert('success', data.message || 'List berhasil disalin!');
                        setTimeout(() => window.location.reload(), 800);
                    } else {
                        showAlert('danger', data.message || 'Gagal menyalin list');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showAlert('danger', 'Terjadi kesalahan saat menyalin list');
                })
                .finally(() => {
                    btn.disabled = false;
                    btn.innerHTML = '<i class="fas fa-copy me-1"></i> Salin';
                });
        }

        function openSortListModal(listId) {
            CURRENT_SORT_LIST_ID = listId;
            const modalEl = document.getElementById('sortListModal');
            const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
            document.getElementById('sortCriteria').value = 'title';
            document.getElementById('sortAsc').checked = true;
            document.getElementById('persistSort').checked = false;
            modal.show();
        }

        function applySortFromModal() {
            const criteria = document.getElementById('sortCriteria').value;
            const order = document.querySelector('input[name="sortOrder"]:checked').value;
            const persist = document.getElementById('persistSort').checked;

            if (!CURRENT_SORT_LIST_ID) return;

            sortListCards(CURRENT_SORT_LIST_ID, criteria, order);

            const modalEl = document.getElementById('sortListModal');
            const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
            modal.hide();

            if (persist) {
                persistListOrder(CURRENT_SORT_LIST_ID)
                    .then(() => showAlert('success', 'Urutan kartu berhasil disimpan!'))
                    .catch(() => showAlert('danger', 'Gagal menyimpan urutan.'));
            } else {
                showAlert('success', 'Urutan kartu diterapkan.');
            }
        }

        function sortListCards(listId, criteria, order = 'asc') {
            const container = document.querySelector(`#list-${listId}-cards`);
            if (!container) return;

            const cards = Array.from(container.querySelectorAll('.task-card'));
            if (cards.length <= 1) return;

            const dir = order === 'desc' ? -1 : 1;

            const getVal = (card) => {
                const ds = card.dataset;
                switch (criteria) {
                    case 'title':
                        return (ds.title || '').toString();
                    case 'created_at':
                        return parseInt(ds.createdAt || '0', 10);
                    case 'due_date': {
                        const v = ds.dueDate ? parseInt(ds.dueDate, 10) : Number
                            .POSITIVE_INFINITY;
                        return v;
                    }
                    case 'comments':
                        return parseInt(ds.commentsCount || '0', 10);
                    case 'attachments':
                        return parseInt(ds.attachmentsCount || '0', 10);
                    case 'priority':
                        return parseInt(ds.priority || '0', 10);
                    case 'created_by':
                        return (ds.createdBy || '').toString();
                    default:
                        return 0;
                }
            };

            const compare = (a, b) => {
                const va = getVal(a);
                const vb = getVal(b);

                if (criteria === 'title' || criteria === 'created_by') {
                    return va.localeCompare(vb) * dir;
                }

                // numbers
                if (va === vb) return 0;
                return va > vb ? dir : -dir;
            };

            // Keep add-card at the end
            const addCardEl = container.querySelector('.add-card');

            cards.sort(compare).forEach(card => {
                if (addCardEl) {
                    container.insertBefore(card, addCardEl);
                } else {
                    container.appendChild(card);
                }
            });
        }

        const UPDATE_URL = "{{ url($url_menu) . '/update' }}";
        const QUICK_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'
        ];
        const cardColorUpdateState = {};

        function isValidCardPastelClass(colorClass) {
            return QUICK_CARD_PASTEL_CLASSES.includes(colorClass);
        }

        function getCurrentCardPastelClass(taskCard) {
            return QUICK_CARD_PASTEL_CLASSES.find((colorClass) => taskCard.classList.contains(colorClass)) || null;
        }

        function applyCardPastelClass(taskCard, colorClass) {
            QUICK_CARD_PASTEL_CLASSES.forEach((cls) => taskCard.classList.remove(cls));
            taskCard.classList.add(colorClass);
        }

        function setCardColorSwatchState(cardId, colorClass) {
            const taskCard = document.querySelector(`.task-card[data-task-id="${cardId}"]`);
            if (!taskCard) return;

            const swatches = taskCard.querySelectorAll('.card-color-quick-swatch');
            swatches.forEach((swatch) => {
                swatch.classList.toggle('selected', swatch.classList.contains(colorClass));
            });
        }

        function setCardColorFromMenu(cardId, colorClass, event = null) {
            if (event) {
                event.preventDefault();
                event.stopPropagation();
            }

            if (!isValidCardPastelClass(colorClass)) return;

            const taskCard = document.querySelector(`.task-card[data-task-id="${cardId}"]`);
            if (!taskCard) return;
            if (cardColorUpdateState[cardId]) return;

            const oldColor = getCurrentCardPastelClass(taskCard) || 'task-card-white';
            if (oldColor === colorClass) return;

            applyCardPastelClass(taskCard, colorClass);
            setCardColorSwatchState(cardId, colorClass);
            cardColorUpdateState[cardId] = true;

            fetch(UPDATE_URL, {
                    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: 'card_color',
                        value: colorClass
                    })
                })
                .then((res) => res.json())
                .then((data) => {
                    if (!data.success) {
                        throw new Error(data.message || 'Gagal menyimpan warna card.');
                    }
                })
                .catch((error) => {
                    console.error('Error updating card color:', error);
                    applyCardPastelClass(taskCard, oldColor);
                    setCardColorSwatchState(cardId, oldColor);
                    showAlert('danger', 'Gagal menyimpan warna card.');
                })
                .finally(() => {
                    cardColorUpdateState[cardId] = false;
                });
        }

        window.setCardColorFromMenu = setCardColorFromMenu;

        async function persistListOrder(listId) {
            const container = document.querySelector(`#list-${listId}-cards`);
            if (!container) return;

            const cards = Array.from(container.querySelectorAll('.task-card'));

            // Update positions sequentially to avoid server-side race conditions
            for (let i = 0; i < cards.length; i++) {
                const idStr = cards[i].dataset.taskId;
                const cardId = parseInt(idStr, 10);
                if (!cardId) continue;
                await updateCardPositionAsync(cardId, listId, i);
            }
        }

        function updateCardPositionAsync(cardId, newListId, newPosition) {
            return fetch(UPDATE_URL, {
                method: 'PUT',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': CSRF_TOKEN
                },
                body: JSON.stringify({
                    card_id: cardId,
                    list_id: newListId,
                    position: newPosition,
                    action: 'move_card'
                })
            }).then(res => res.json()).then(data => {
                if (!data.success) {
                    throw new Error(data.message || 'Failed to update card position');
                }
                return data;
            });
        }

        let CURRENT_MOVE_LIST_ID = null;
        const CREATE_LIST_URL = "{{ url($url_menu) }}";

        function openMoveListModal(listId) {
            CURRENT_MOVE_LIST_ID = listId;

            const boardSelect = document.getElementById('moveListBoardSelect');
            const moveBtn = document.getElementById('confirmMoveListBtn');
            const hasValidOptions = boardSelect && boardSelect.options.length > 0 &&
                !(boardSelect.options.length === 1 && boardSelect.options[0].disabled);

            if (moveBtn) moveBtn.disabled = !hasValidOptions;

            const modalEl = document.getElementById('moveListModal');
            bootstrap.Modal.getOrCreateInstance(modalEl).show();
        }

        function submitMoveList() {
            if (!CURRENT_MOVE_LIST_ID) return;

            const boardSelect = document.getElementById('moveListBoardSelect');
            const targetBoardId = boardSelect?.value;

            if (!targetBoardId) {
                showAlert?.('warning', 'Silakan pilih board tujuan.');
                return;
            }

            const btn = document.getElementById('confirmMoveListBtn');
            const originalHtml = btn.innerHTML;
            btn.disabled = true;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Memindahkan...';

            const payload = {
                action: 'move_list',
                list_id: CURRENT_MOVE_LIST_ID,
                board_id: parseInt(targetBoardId, 10),
                position: 9999
            };

            fetch(UPDATE_URL, {
                    method: 'PUT',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': CSRF_TOKEN
                    },
                    body: JSON.stringify(payload)
                })
                .then(res => res.json())
                .then(data => {
                    if (data?.success) {
                        showAlert?.('success', 'Berhasil memindahkan list!');

                        const modalEl = document.getElementById('moveListModal');
                        bootstrap.Modal.getOrCreateInstance(modalEl).hide();
                        setTimeout(() => window.location.reload(), 400);
                    } else {
                        throw new Error(data?.message || 'Gagal memindahkan list.');
                    }
                })
                .catch(err => {
                    console.error(err);
                    showAlert?.('danger', err.message || 'Gagal memindahkan list.');
                })
                .finally(() => {
                    btn.disabled = false;
                    btn.innerHTML = originalHtml;
                });
        }


        // ========== Move Card to Another Board Functions ==========
        let CURRENT_MOVE_CARD_ID = null;
        let CURRENT_SOURCE_LIST_ID = null;
        let TARGET_BOARD_LISTS_CACHE = {};

        // Open modal from Aksi List menu (for moving cards from a specific list)
        function openMoveCardFromListModal(listId) {
            CURRENT_MOVE_CARD_ID = null;
            CURRENT_SOURCE_LIST_ID = listId;

            // Reset form
            const checkboxList = document.getElementById('moveCardCheckboxList');
            const boardSelect = document.getElementById('moveCardBoardSelect');
            const listSelect = document.getElementById('moveCardListSelect');
            const moveBtn = document.getElementById('confirmMoveCardToBoardBtn');
            const searchInput = document.getElementById('moveCardSearchInput');

            // Reset search input
            if (searchInput) searchInput.value = '';

            // Populate checkbox list with cards from this list
            const cardsContainer = document.getElementById(`list-${listId}-cards`);
            const cards = cardsContainer ? cardsContainer.querySelectorAll('.task-card') : [];

            if (cards.length === 0) {
                checkboxList.innerHTML = '<div class="text-muted text-center py-2">Tidak ada card di list ini</div>';
            } else {
                let checkboxHtml = '';
                cards.forEach(card => {
                    const cardId = card.dataset.taskId;
                    const cardTitle = card.querySelector('.task-title')?.textContent?.trim() || 'Untitled';
                    checkboxHtml += `
                        <div class="form-check py-1 border-bottom">
                            <input class="form-check-input move-card-checkbox" type="checkbox" 
                                   value="${cardId}" id="moveCard${cardId}" onchange="updateSelectedCardCount()">
                            <label class="form-check-label w-100 cursor-pointer" for="moveCard${cardId}">
                                ${cardTitle}
                            </label>
                        </div>
                    `;
                });
                checkboxList.innerHTML = checkboxHtml;
            }

            // Reset selected count
            updateSelectedCardCount();

            if (boardSelect) boardSelect.value = '';
            if (listSelect) {
                listSelect.innerHTML = '<option value="" disabled selected>Pilih board terlebih dahulu...</option>';
                listSelect.disabled = true;
            }
            if (moveBtn) moveBtn.disabled = true;

            const modalEl = document.getElementById('moveCardToBoardModal');
            bootstrap.Modal.getOrCreateInstance(modalEl).show();
        }

        // Legacy function - kept for backwards compatibility (single card move)
        function openMoveCardToBoardModal(cardId) {
            CURRENT_MOVE_CARD_ID = cardId;
            CURRENT_SOURCE_LIST_ID = null;

            // Reset form
            const checkboxList = document.getElementById('moveCardCheckboxList');
            const boardSelect = document.getElementById('moveCardBoardSelect');
            const listSelect = document.getElementById('moveCardListSelect');
            const moveBtn = document.getElementById('confirmMoveCardToBoardBtn');

            // Find the card element to get the list it belongs to
            const cardElement = document.querySelector(`[data-task-id="${cardId}"]`);
            if (cardElement) {
                const listId = cardElement.dataset.listId;
                CURRENT_SOURCE_LIST_ID = listId;

                // Populate checkbox list with cards, pre-select the target card
                const cardsContainer = document.getElementById(`list-${listId}-cards`);
                const cards = cardsContainer ? cardsContainer.querySelectorAll('.task-card') : [];

                let checkboxHtml = '';
                cards.forEach(card => {
                    const cId = card.dataset.taskId;
                    const cardTitle = card.querySelector('.task-title')?.textContent?.trim() || 'Untitled';
                    const checked = cId == cardId ? 'checked' : '';
                    checkboxHtml += `
                        <div class="form-check py-1 border-bottom">
                            <input class="form-check-input move-card-checkbox" type="checkbox" 
                                   value="${cId}" id="moveCard${cId}" ${checked} onchange="updateSelectedCardCount()">
                            <label class="form-check-label w-100 cursor-pointer" for="moveCard${cId}">
                                ${cardTitle}
                            </label>
                        </div>
                    `;
                });
                checkboxList.innerHTML = checkboxHtml;
            }

            // Update selected count
            updateSelectedCardCount();

            if (boardSelect) boardSelect.value = '';
            if (listSelect) {
                listSelect.innerHTML = '<option value="" disabled selected>Pilih board terlebih dahulu...</option>';
                listSelect.disabled = true;
            }
            if (moveBtn) moveBtn.disabled = true;

            const modalEl = document.getElementById('moveCardToBoardModal');
            bootstrap.Modal.getOrCreateInstance(modalEl).show();
        }

        // Update selected card count display
        function updateSelectedCardCount() {
            const checkboxes = document.querySelectorAll('.move-card-checkbox:checked');
            const countEl = document.getElementById('selectedCardCount');
            if (countEl) {
                countEl.textContent = checkboxes.length;
            }
            validateMoveCardForm();
        }

        // Select all cards (only visible ones after filter)
        function selectAllCards() {
            const checkboxes = document.querySelectorAll('.move-card-checkbox');
            checkboxes.forEach(cb => {
                // Only select if the parent is visible
                if (cb.closest('.form-check').style.display !== 'none') {
                    cb.checked = true;
                }
            });
            updateSelectedCardCount();
        }

        // Deselect all cards
        function deselectAllCards() {
            const checkboxes = document.querySelectorAll('.move-card-checkbox');
            checkboxes.forEach(cb => cb.checked = false);
            updateSelectedCardCount();
        }

        // Filter card list based on search input
        function filterMoveCardList() {
            const searchInput = document.getElementById('moveCardSearchInput');
            const searchTerm = searchInput?.value?.toLowerCase()?.trim() || '';
            const checkboxItems = document.querySelectorAll('#moveCardCheckboxList .form-check');

            checkboxItems.forEach(item => {
                const label = item.querySelector('.form-check-label');
                const cardTitle = label?.textContent?.toLowerCase() || '';

                if (searchTerm === '' || cardTitle.includes(searchTerm)) {
                    item.style.display = '';
                } else {
                    item.style.display = 'none';
                }
            });
        }

        // Get selected card IDs
        function getSelectedCardIds() {
            const checkboxes = document.querySelectorAll('.move-card-checkbox:checked');
            return Array.from(checkboxes).map(cb => parseInt(cb.value, 10));
        }

        // Validate form and enable/disable move button
        function validateMoveCardForm() {
            const selectedCards = getSelectedCardIds();
            const listSelect = document.getElementById('moveCardListSelect');
            const moveBtn = document.getElementById('confirmMoveCardToBoardBtn');

            const hasCards = selectedCards.length > 0;
            const hasList = listSelect && listSelect.value;

            if (moveBtn) {
                moveBtn.disabled = !(hasCards && hasList);
                // Update button text based on count
                const btnText = moveBtn.querySelector('.btn-text');
                if (btnText) {
                    btnText.textContent = selectedCards.length > 1 ?
                        `Pindahkan ${selectedCards.length} Card` :
                        'Pindahkan';
                }
            }
        }

        function loadTargetBoardLists() {
            const boardSelect = document.getElementById('moveCardBoardSelect');
            const listSelect = document.getElementById('moveCardListSelect');
            const moveBtn = document.getElementById('confirmMoveCardToBoardBtn');
            const targetBoardId = boardSelect?.value;

            if (!targetBoardId) {
                listSelect.innerHTML = '<option value="" disabled selected>Pilih board terlebih dahulu...</option>';
                listSelect.disabled = true;
                moveBtn.disabled = true;
                return;
            }

            // Show loading state
            listSelect.innerHTML = '<option value="" disabled selected>Memuat list...</option>';
            listSelect.disabled = true;

            // Check cache first
            if (TARGET_BOARD_LISTS_CACHE[targetBoardId]) {
                const cachedData = TARGET_BOARD_LISTS_CACHE[targetBoardId];
                populateListSelect(cachedData.lists || cachedData);
                return;
            }

            // Fetch lists from target board
            fetch(`{{ url('/boards') }}/${targetBoardId}/lists`, {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success && data.lists) {
                        TARGET_BOARD_LISTS_CACHE[targetBoardId] = {
                            lists: data.lists,
                            member_count: data.member_count || 0
                        };
                        populateListSelect(data.lists);
                    } else {
                        throw new Error(data.message || 'Gagal memuat list');
                    }
                })
                .catch(err => {
                    console.error('Error loading lists:', err);
                    listSelect.innerHTML = '<option value="" disabled selected>Gagal memuat list</option>';
                    showAlert?.('danger', 'Gagal memuat list dari board tujuan.');
                });
        }

        function populateListSelect(lists) {
            const listSelect = document.getElementById('moveCardListSelect');

            if (!lists || lists.length === 0) {
                listSelect.innerHTML = '<option value="" disabled selected>Board tidak memiliki list</option>';
                listSelect.disabled = true;
                validateMoveCardForm();
                return;
            }

            let optionsHtml = '<option value="" disabled selected>Pilih list tujuan...</option>';
            lists.forEach(list => {
                optionsHtml += `<option value="${list.id}">${list.title}</option>`;
            });

            listSelect.innerHTML = optionsHtml;
            listSelect.disabled = false;

            // Add change listener to validate form
            listSelect.onchange = function() {
                validateMoveCardForm();
            };
        }

        function submitMoveCardToBoard() {
            const selectedCardIds = getSelectedCardIds();

            if (selectedCardIds.length === 0) {
                showAlert?.('warning', 'Silakan pilih minimal 1 card yang akan dipindahkan.');
                return;
            }

            const boardSelect = document.getElementById('moveCardBoardSelect');
            const listSelect = document.getElementById('moveCardListSelect');
            const targetBoardId = boardSelect?.value;
            const targetListId = listSelect?.value;

            if (!targetBoardId || !targetListId) {
                showAlert?.('warning', 'Silakan pilih board dan list tujuan.');
                return;
            }

            const btn = document.getElementById('confirmMoveCardToBoardBtn');
            const btnText = btn.querySelector('.btn-text');
            const btnLoading = btn.querySelector('.btn-loading');

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

            const payload = {
                action: 'move_cards_to_board',
                card_ids: selectedCardIds,
                target_board_id: parseInt(targetBoardId, 10),
                target_list_id: parseInt(targetListId, 10)
            };

            fetch(UPDATE_URL, {
                    method: 'PUT',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': CSRF_TOKEN
                    },
                    body: JSON.stringify(payload)
                })
                .then(res => res.json())
                .then(data => {
                    if (data?.success) {
                        const count = selectedCardIds.length;
                        const msg = count > 1 ?
                            `${count} card berhasil dipindahkan ke board lain!` :
                            'Card berhasil dipindahkan ke board lain!';
                        showAlert?.('success', msg);

                        // Close move card modal
                        const moveCardModal = document.getElementById('moveCardToBoardModal');
                        bootstrap.Modal.getOrCreateInstance(moveCardModal).hide();

                        // Close view card modal if open
                        const viewCardModal = document.getElementById('viewCardModal');
                        if (viewCardModal) {
                            bootstrap.Modal.getOrCreateInstance(viewCardModal).hide();
                        }

                        // Remove cards from current board UI with animation
                        selectedCardIds.forEach((cardId, index) => {
                            const cardElement = document.querySelector(`[data-task-id="${cardId}"]`);
                            if (cardElement) {
                                setTimeout(() => {
                                    cardElement.style.transition = 'all 0.3s ease';
                                    cardElement.style.opacity = '0';
                                    cardElement.style.transform = 'scale(0.8)';
                                    setTimeout(() => cardElement.remove(), 300);
                                }, index * 100); // Stagger animation
                            }
                        });
                    } else {
                        throw new Error(data?.message || 'Gagal memindahkan card.');
                    }
                })
                .catch(err => {
                    console.error(err);
                    showAlert?.('danger', err.message || 'Gagal memindahkan card.');
                })
                .finally(() => {
                    btn.disabled = false;
                    btnText.classList.remove('d-none');
                    btnLoading.classList.add('d-none');
                });
        }

        // Make function globally accessible
        window.openMoveCardToBoardModal = openMoveCardToBoardModal;
        // ========== End Move Card Functions ==========

        // ========== Copy Card to Board Functions ==========
        let CURRENT_COPY_CARD_ID = null;
        let CURRENT_COPY_SOURCE_LIST_ID = null;

        function openCopyCardToBoardModal(cardId) {
            CURRENT_COPY_CARD_ID = cardId;
            CURRENT_COPY_SOURCE_LIST_ID = null;

            // Reset form
            const checkboxList = document.getElementById('copyCardCheckboxList');
            const boardSelect = document.getElementById('copyCardBoardSelect');
            const listSelect = document.getElementById('copyCardListSelect');
            const copyBtn = document.getElementById('confirmCopyCardToBoardBtn');
            const searchInput = document.getElementById('copyCardSearchInput');

            if (searchInput) searchInput.value = '';

            // Find the card element to get the list it belongs to
            const cardElement = document.querySelector(`[data-task-id="${cardId}"]`);
            if (cardElement) {
                const listId = cardElement.dataset.listId;
                CURRENT_COPY_SOURCE_LIST_ID = listId;

                // Populate checkbox list with cards, pre-select the target card
                const cardsContainer = document.getElementById(`list-${listId}-cards`);
                const cards = cardsContainer ? cardsContainer.querySelectorAll('.task-card') : [];

                let checkboxHtml = '';
                cards.forEach(card => {
                    const cId = card.dataset.taskId;
                    const cardTitle = card.querySelector('.task-title')?.textContent?.trim() || 'Untitled';
                    const checked = cId == cardId ? 'checked' : '';
                    checkboxHtml += `
                        <div class="form-check py-1 border-bottom">
                            <input class="form-check-input copy-card-checkbox" type="checkbox" 
                                   value="${cId}" id="copyCard${cId}" ${checked} onchange="updateSelectedCopyCardCount()">
                            <label class="form-check-label w-100 cursor-pointer" for="copyCard${cId}">
                                ${cardTitle}
                            </label>
                        </div>
                    `;
                });
                checkboxList.innerHTML = checkboxHtml;
            }

            // Update selected count
            updateSelectedCopyCardCount();

            if (boardSelect) boardSelect.value = '';
            if (listSelect) {
                listSelect.innerHTML = '<option value="" disabled selected>Pilih board terlebih dahulu...</option>';
                listSelect.disabled = true;
            }
            if (copyBtn) copyBtn.disabled = true;

            const modalEl = document.getElementById('copyCardToBoardModal');
            bootstrap.Modal.getOrCreateInstance(modalEl).show();
        }

        // Update selected copy card count display
        function updateSelectedCopyCardCount() {
            const checkboxes = document.querySelectorAll('.copy-card-checkbox:checked');
            const countEl = document.getElementById('selectedCopyCardCount');
            if (countEl) {
                countEl.textContent = checkboxes.length;
            }
            validateCopyCardForm();
        }

        // Select all copy cards (only visible ones after filter)
        function selectAllCopyCards() {
            const checkboxes = document.querySelectorAll('.copy-card-checkbox');
            checkboxes.forEach(cb => {
                if (cb.closest('.form-check').style.display !== 'none') {
                    cb.checked = true;
                }
            });
            updateSelectedCopyCardCount();
        }

        // Deselect all copy cards
        function deselectAllCopyCards() {
            const checkboxes = document.querySelectorAll('.copy-card-checkbox');
            checkboxes.forEach(cb => cb.checked = false);
            updateSelectedCopyCardCount();
        }

        // Filter copy card list based on search input
        function filterCopyCardList() {
            const searchInput = document.getElementById('copyCardSearchInput');
            const searchTerm = searchInput?.value?.toLowerCase()?.trim() || '';
            const checkboxItems = document.querySelectorAll('#copyCardCheckboxList .form-check');

            checkboxItems.forEach(item => {
                const label = item.querySelector('.form-check-label');
                const cardTitle = label?.textContent?.toLowerCase() || '';

                if (searchTerm === '' || cardTitle.includes(searchTerm)) {
                    item.style.display = '';
                } else {
                    item.style.display = 'none';
                }
            });
        }

        // Get selected copy card IDs
        function getSelectedCopyCardIds() {
            const checkboxes = document.querySelectorAll('.copy-card-checkbox:checked');
            return Array.from(checkboxes).map(cb => parseInt(cb.value, 10));
        }

        // Validate copy form and enable/disable copy button
        function validateCopyCardForm() {
            const selectedCards = getSelectedCopyCardIds();
            const listSelect = document.getElementById('copyCardListSelect');
            const copyBtn = document.getElementById('confirmCopyCardToBoardBtn');

            const hasCards = selectedCards.length > 0;
            const hasList = listSelect && listSelect.value;

            if (copyBtn) {
                copyBtn.disabled = !(hasCards && hasList);
                const btnText = copyBtn.querySelector('.btn-text');
                if (btnText) {
                    btnText.textContent = selectedCards.length > 1 ?
                        `Salin ${selectedCards.length} Card` :
                        'Salin';
                }
            }
        }

        function loadCopyTargetBoardLists() {
            const boardSelect = document.getElementById('copyCardBoardSelect');
            const listSelect = document.getElementById('copyCardListSelect');
            const copyBtn = document.getElementById('confirmCopyCardToBoardBtn');
            const memberWarning = document.getElementById('copyCardMemberWarning');
            const targetBoardId = boardSelect?.value;

            // Hide warning by default
            memberWarning?.classList.add('d-none');

            if (!targetBoardId) {
                listSelect.innerHTML = '<option value="" disabled selected>Pilih board terlebih dahulu...</option>';
                listSelect.disabled = true;
                copyBtn.disabled = true;
                return;
            }

            // Show loading state
            listSelect.innerHTML = '<option value="" disabled selected>Memuat list...</option>';
            listSelect.disabled = true;

            // Check cache first (reuse the move card cache)
            if (TARGET_BOARD_LISTS_CACHE[targetBoardId]) {
                const cachedData = TARGET_BOARD_LISTS_CACHE[targetBoardId];
                populateCopyListSelect(cachedData.lists || cachedData);
                // Show warning if target board has fewer members than current board
                const targetMemberCount = cachedData.member_count || 0;
                const currentMemberCount = typeof boardMembers !== 'undefined' ? boardMembers.length : 0;
                if (targetMemberCount < currentMemberCount) {
                    memberWarning?.classList.remove('d-none');
                } else {
                    memberWarning?.classList.add('d-none');
                }
                return;
            }

            // Fetch lists from target board
            fetch(`{{ url('/boards') }}/${targetBoardId}/lists`, {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success && data.lists) {
                        // Cache both lists and member count
                        TARGET_BOARD_LISTS_CACHE[targetBoardId] = {
                            lists: data.lists,
                            member_count: data.member_count || 0
                        };
                        populateCopyListSelect(data.lists);
                        // Show warning if target board has fewer members than current board
                        const targetMemberCount = data.member_count || 0;
                        const currentMemberCount = typeof boardMembers !== 'undefined' ? boardMembers.length : 0;
                        if (targetMemberCount < currentMemberCount) {
                            memberWarning?.classList.remove('d-none');
                        } else {
                            memberWarning?.classList.add('d-none');
                        }
                    } else {
                        throw new Error(data.message || 'Gagal memuat list');
                    }
                })
                .catch(err => {
                    console.error('Error loading lists:', err);
                    listSelect.innerHTML = '<option value="" disabled selected>Gagal memuat list</option>';
                    showAlert?.('danger', 'Gagal memuat list dari board tujuan.');
                });
        }

        function populateCopyListSelect(lists) {
            const listSelect = document.getElementById('copyCardListSelect');

            if (!lists || lists.length === 0) {
                listSelect.innerHTML = '<option value="" disabled selected>Board tidak memiliki list</option>';
                listSelect.disabled = true;
                validateCopyCardForm();
                return;
            }

            let optionsHtml = '<option value="" disabled selected>Pilih list tujuan...</option>';
            lists.forEach(list => {
                optionsHtml += `<option value="${list.id}">${list.title}</option>`;
            });

            listSelect.innerHTML = optionsHtml;
            listSelect.disabled = false;

            listSelect.onchange = function() {
                validateCopyCardForm();
            };
        }

        // Store copy data for warning modal confirmation
        let pendingCopyData = null;

        function checkMembersBeforeCopy() {
            const selectedCardIds = getSelectedCopyCardIds();

            if (selectedCardIds.length === 0) {
                showAlert?.('warning', 'Silakan pilih minimal 1 card yang akan disalin.');
                return;
            }

            const boardSelect = document.getElementById('copyCardBoardSelect');
            const listSelect = document.getElementById('copyCardListSelect');
            const targetBoardId = boardSelect?.value;
            const targetListId = listSelect?.value;
            const targetBoardName = boardSelect?.options[boardSelect.selectedIndex]?.text || 'Board Tujuan';

            if (!targetBoardId || !targetListId) {
                showAlert?.('warning', 'Silakan pilih board dan list tujuan.');
                return;
            }

            const btn = document.getElementById('confirmCopyCardToBoardBtn');
            const btnText = btn.querySelector('.btn-text');
            const btnLoading = btn.querySelector('.btn-loading');

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

            // Fetch member info for selected cards and target board
            fetch(`{{ url('/boards') }}/${targetBoardId}/copy-check`, {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': CSRF_TOKEN
                    },
                    body: JSON.stringify({
                        card_ids: selectedCardIds
                    })
                })
                .then(res => res.json())
                .then(data => {
                    btn.disabled = false;
                    btnText.classList.remove('d-none');
                    btnLoading.classList.add('d-none');

                    if (data?.success) {
                        const cardMemberCount = data.card_member_count || 0;
                        const boardMemberCount = data.board_member_count || 0;
                        const unmatchedMembers = data.unmatched_members || [];

                        // Store copy data for later execution
                        pendingCopyData = {
                            card_ids: selectedCardIds,
                            target_board_id: parseInt(targetBoardId, 10),
                            target_list_id: parseInt(targetListId, 10),
                            with_comments: document.getElementById('copyCardWithComments')?.checked ?? true,
                            with_attachments: document.getElementById('copyCardWithAttachments')?.checked ?? true,
                            with_checklists: document.getElementById('copyCardWithChecklists')?.checked ?? true,
                            with_deadline: document.getElementById('copyCardWithDeadline')?.checked ?? true
                        };

                        // If there are unmatched members, show warning modal
                        if (unmatchedMembers.length > 0 || cardMemberCount > boardMemberCount) {
                            // Update warning modal content
                            const cardCountEl = document.getElementById('copyWarningCardCount');
                            const boardNameEl = document.getElementById('copyWarningBoardName');
                            const cardMemberCountEl = document.getElementById('copyWarningCardMemberCount');
                            const boardMemberCountEl = document.getElementById('copyWarningBoardMemberCount');
                            const memberInfoEl = document.getElementById('copyWarningMemberInfo');
                            const memberListEl = document.getElementById('copyWarningMemberList');

                            if (cardCountEl) cardCountEl.textContent = selectedCardIds.length;
                            if (boardNameEl) boardNameEl.textContent = targetBoardName;

                            // Show member info section only if there are unmatched members
                            if (unmatchedMembers.length > 0 && memberInfoEl) {
                                memberInfoEl.classList.remove('d-none');

                                // Render member badges with avatars
                                if (memberListEl) {
                                    memberListEl.innerHTML = unmatchedMembers.map(member => `
                                        <div class="d-flex align-items-center bg-white border rounded-pill px-2 py-1" style="gap: 6px;">
                                            <img src="${member.avatar || '/img/default-avatar.png'}" 
                                                 alt="${member.name}" 
                                                 class="rounded-circle" 
                                                 style="width: 24px; height: 24px; object-fit: cover;">
                                            <span class="small text-dark">${member.name}</span>
                                        </div>
                                    `).join('');
                                }
                            } else if (memberInfoEl) {
                                memberInfoEl.classList.add('d-none');
                            }

                            // Show warning modal
                            const warningModal = document.getElementById('copyCardWarningModal');
                            if (warningModal) {
                                bootstrap.Modal.getOrCreateInstance(warningModal).show();
                            } else {
                                // Fallback: if modal not found, proceed directly
                                executeCopyCardToBoard();
                            }
                        } else {
                            // No warning needed, proceed directly
                            executeCopyCardToBoard();
                        }
                    } else {
                        throw new Error(data?.message || 'Gagal memeriksa data member.');
                    }
                })
                .catch(err => {
                    console.error(err);
                    showAlert?.('danger', err.message || 'Gagal memeriksa data member.');
                    btn.disabled = false;
                    btnText.classList.remove('d-none');
                    btnLoading.classList.add('d-none');
                });
        }

        function executeCopyCardToBoard() {
            if (!pendingCopyData) {
                showAlert?.('danger', 'Data tidak valid. Silakan coba lagi.');
                return;
            }

            // Close warning modal if open
            const warningModal = document.getElementById('copyCardWarningModal');
            bootstrap.Modal.getOrCreateInstance(warningModal).hide();

            const btn = document.getElementById('confirmCopyWarningBtn');
            const btnText = btn?.querySelector('.btn-text');
            const btnLoading = btn?.querySelector('.btn-loading');

            if (btn) {
                btn.disabled = true;
                btnText?.classList.add('d-none');
                btnLoading?.classList.remove('d-none');
            }

            const payload = {
                action: 'copy_cards_to_board',
                ...pendingCopyData
            };

            fetch(UPDATE_URL, {
                    method: 'PUT',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': CSRF_TOKEN
                    },
                    body: JSON.stringify(payload)
                })
                .then(res => res.json())
                .then(data => {
                    if (data?.success) {
                        const count = pendingCopyData.card_ids.length;
                        const msg = count > 1 ?
                            `${count} card berhasil disalin ke board lain!` :
                            'Card berhasil disalin ke board lain!';
                        showAlert?.('success', msg);

                        // Close copy card modal
                        const copyCardModal = document.getElementById('copyCardToBoardModal');
                        bootstrap.Modal.getOrCreateInstance(copyCardModal).hide();

                        // Close view card modal if open
                        const viewCardModal = document.getElementById('viewCardModal');
                        if (viewCardModal) {
                            bootstrap.Modal.getOrCreateInstance(viewCardModal).hide();
                        }

                        // Clear pending data
                        pendingCopyData = null;
                    } else {
                        throw new Error(data?.message || 'Gagal menyalin card.');
                    }
                })
                .catch(err => {
                    console.error(err);
                    showAlert?.('danger', err.message || 'Gagal menyalin card.');
                })
                .finally(() => {
                    if (btn) {
                        btn.disabled = false;
                        btnText?.classList.remove('d-none');
                        btnLoading?.classList.add('d-none');
                    }
                });
        }

        // Legacy function for backward compatibility
        function submitCopyCardToBoard() {
            checkMembersBeforeCopy();
        }

        // Make copy function globally accessible
        window.openCopyCardToBoardModal = openCopyCardToBoardModal;
        window.addNewList = addNewList;
        window.createNewList = createNewList;
        window.cancelAddList = cancelAddList;
        // ========== End Copy Card Functions ==========

        function addNewList() {
            const addListBtn = document.getElementById('add-list-btn');
            const addListForm = document.getElementById('add-list-form');
            const listTitleInput = document.getElementById('list-title-input');

            addListBtn.style.display = 'none';
            addListForm.style.display = 'block';
            setTimeout(() => listTitleInput.focus(), 100);
        }

        function createNewList() {
            const listTitleInput = document.getElementById('list-title-input');
            const title = listTitleInput.value.trim();

            if (!title) {
                showAlert('danger', 'Masukan judul list.');
                listTitleInput.focus();
                return;
            }

            const addButton = document.querySelector('.btn-add-list');
            addButton.disabled = true;
            addButton.textContent = 'Membuat...';

            const boardId = window.location.pathname.split('/').pop();

            fetch(CREATE_LIST_URL, {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': CSRF_TOKEN
                    },
                    body: JSON.stringify({
                        list_title: title,
                        board_id: boardId
                    })
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        const list = data.list;
                        const adminActions = isAdmin ? `
              <div class="list-action-dropdown dropdown dropstart">
                <button class="list-action-btn" type="button" id="listActionDropdownBtn-${list.id}" data-bs-toggle="dropdown" aria-expanded="false">
                  <i class="fas fa-ellipsis-h"></i>
                </button>
                <ul class="dropdown-menu" aria-labelledby="listActionDropdownBtn-${list.id}" data-bs-popper="static" data-bs-offset="0,10">
                  <div class="dropdown-header text-center">
                    <h5 class="dropdown-title fw-bold">Aksi List</h5>
                  </div>
                  <li class="mt-2">
                    <a class="dropdown-item text-dark d-flex justify-content-between align-items-center" href="#" onclick="event.preventDefault(); event.stopPropagation(); archiveList(${list.id});" id="archive-list-btn-${list.id}">
                      <span>
                        <i class="fas fa-archive me-2"></i>Arsipkan list
                      </span>
                      <i class="fas fa-spinner fa-spin d-none" role="status" id="archive-list-spinner-${list.id}" style="width: 1rem; height: 1rem;">
                        <span class="visually-hidden">Loading...</span>
                      </i>
                    </a>
                  </li>
                  <li class="mt-2">
                    <a class="dropdown-item text-dark" href="#" onclick="openMoveListModal(${list.id}); event.preventDefault();">
                      <i class="fas fa-arrows-alt me-2"></i>Pindahkan list ini ke board lain
                    </a>
                  </li>
                  <li class="mt-2">
                    <a class="dropdown-item text-dark" href="#" onclick="event.preventDefault(); event.stopPropagation(); openCopyListModal(${list.id}, '${list.title.replace(/'/g, "\\'")}')"> 
                      <i class="fas fa-copy me-2"></i>Salin list
                    </a>
                  </li>
                  <li class="mt-2">
                    <a class="dropdown-item text-dark" href="#" onclick="event.preventDefault(); event.stopPropagation(); openSortListModal(${list.id})">
                      <i class="fas fa-sort-amount-down me-2"></i>Urutkan list berdasarkan.. 
                    </a>
                  </li>
                </ul>
              </div>` : '';

                        const newColumnHTML = `
              <div class="kanban-column" data-list-id="${list.id}" data-board-id="${list.board_id}">
                <div class="column-container">
                  <div class="column-header${isAdmin ? '' : ' non-draggable'}">
                    <p class="column-title-display">${list.title}</p>
                    <input type="text" class="d-none column-title-input column-title-edit" value="${list.title}" data-list-id="${list.id}" onblur="updateListTitle(this)" onkeydown="handleListTitleKeydown(event, this)">
                    ${adminActions}
                  </div>
                  <div id="list-${list.id}-cards" class="cards-container" data-list-id="${list.id}">
                    <div class="add-card" onclick="openCreateCardModal(${list.id})">
                      <small class="add-card-text"><i class="fas fa-plus me-2"></i>Tambah card baru</small>
                    </div>
                  </div>
                </div>
              </div>`;

                        document.querySelector('.kanban-column:last-child').insertAdjacentHTML('beforebegin',
                            newColumnHTML);

                        cancelAddList();
                        showAlert('success', 'Berhasil membuat list!');
                        updateAddListButtonText();
                        reinitializeSortableAfterListAdd();
                        initializeInlineEditForColumns();
                        setTimeout(checkAndToggleOverflow, 100);
                    } else {
                        showAlert('danger', `Gagal membuat list: ${data.message || 'Unknown error'}.`);
                    }
                })
                .catch(error => {
                    console.error('Error creating list:', error);
                    showAlert('danger', 'Gagal membuat list. Silakan coba lagi.');
                })
                .finally(() => {
                    addButton.disabled = false;
                    addButton.textContent = 'Tambah List';
                });
        }

        function cancelAddList() {
            const listTitleInput = document.getElementById('list-title-input');
            listTitleInput.value = '';

            document.getElementById('add-list-form').style.display = 'none';
            document.getElementById('add-list-btn').style.display = 'block';
        }

        // Global fix: Ensure body scroll is restored when any modal is closed
        document.addEventListener('DOMContentLoaded', function() {
            // Listen for all modal hidden events
            document.body.addEventListener('hidden.bs.modal', function() {
                // Small delay to allow Bootstrap to process
                setTimeout(function() {
                    // Check if any modal is still open
                    const openModals = document.querySelectorAll('.modal.show');
                    if (openModals.length === 0) {
                        // No modals are open, restore body scroll
                        document.body.style.overflow = '';
                        document.body.style.paddingRight = '';
                        document.body.classList.remove('modal-open');
                    }
                }, 100);
            });
        });

        document.addEventListener('DOMContentLoaded', function() {
            const dragThreshold = 5;

            document.querySelectorAll('.column-title-input').forEach(input => {
                let isDragging = false;
                let startX, startY;

                input.addEventListener('mousedown', e => {
                    isDragging = false;
                    startX = e.clientX;
                    startY = e.clientY;
                });

                input.addEventListener('mousemove', e => {
                    if (startX !== undefined && startY !== undefined) {
                        if (Math.abs(e.clientX - startX) > dragThreshold ||
                            Math.abs(e.clientY - startY) > dragThreshold) {
                            isDragging = true;
                        }
                    }
                });

                input.addEventListener('mouseup', e => {
                    if (!isDragging) {
                        input.focus();
                    }
                    isDragging = false;
                    startX = startY = undefined;
                });

                // Prevent focusing on click if it was a drag
                input.addEventListener('click', function(e) {
                    if (isDragging) {
                        e.preventDefault();
                    }
                });
            });
        });

        // Handle Enter key in the input field
        document.addEventListener('DOMContentLoaded', function() {
            const listTitleInput = document.getElementById('list-title-input');

            listTitleInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    createNewList();
                } else if (e.key === 'Escape') {
                    cancelAddList();
                }
            });

            // Update add list button text based on existing lists
            updateAddListButtonText();
        });

        // Function to update the add list button text
        function updateAddListButtonText() {
            const addListText = document.querySelector('.add-list-text');
            const existingLists = document.querySelectorAll('.kanban-column .column-container:not(.empty-board-message)');

            if (addListText) {
                if (existingLists.length === 0) {
                    addListText.innerHTML = '<i class="fas fa-plus me-2"></i>Tambahkan list pertama';
                } else {
                    addListText.innerHTML = '<i class="fas fa-plus me-2"></i>Tambah list baru';
                }
            }
        }

        // Task card click handler
        document.addEventListener('click', function(e) {
            // Jika klik tombol edit atau tombol archive, jangan buka modal
            if (
                e.target.classList.contains('card-action-btn') ||
                e.target.closest('.card-action-btn') ||
                e.target.classList.contains('card-archive-btn') ||
                e.target.closest('.card-archive-btn')
            ) {
                return;
            }
            // Sembunyikan semua archive btn saat klik di luar card
            document.querySelectorAll('.card-archive-btn').forEach(function(btn) {
                btn.classList.add('d-none');
            });

            const taskCard = e.target.closest('.task-card');
            if (taskCard) {
                const taskId = taskCard.dataset.taskId;
                if (taskId) {
                    openViewCardModal(taskId);
                }
            }
        });

        // Function to check and toggle overflow for cards containers
        function checkAndToggleOverflow() {
            document.querySelectorAll('.column-container').forEach(container => {
                const cardsContainer = container.querySelector('.cards-container');
                if (!cardsContainer) return;

                const maxHeight = window.innerHeight - 50;
                const containerHeight = container.offsetHeight;

                // If container height reaches or exceeds max height, enable scroll
                if (containerHeight >= maxHeight) {
                    cardsContainer.classList.add('scrollable');
                } else {
                    cardsContainer.classList.remove('scrollable');
                }
            });
        }

        // Initialize SortableJS for drag and drop
        // Store Sortable instance for kanban columns globally
        let kanbanColumnsSortable = null;
        let cardsScrollPosition = {};

        function saveCardsScrollPosition() {
            document.querySelectorAll('.cards-container').forEach(container => {
                cardsScrollPosition[container.id] = container.scrollTop;
            });
        }

        function restoreCardsScrollPosition() {
            setTimeout(() => {
                document.querySelectorAll('.cards-container').forEach(container => {
                    if (cardsScrollPosition[container.id] !== undefined) {
                        container.scrollTop = cardsScrollPosition[container.id];
                    }
                });
            }, 50);
        }

        function initializeSortable() {
            const cardContainers = document.querySelectorAll('.cards-container');

            cardContainers.forEach(container => {
                new Sortable(container, {
                    group: 'cards',
                    draggable: '.task-card',
                    ghostClass: 'sortable-ghost',
                    chosenClass: 'sortable-chosen',
                    dragClass: 'sortable-drag',
                    filter: '.add-card, .no-drag',
                    preventOnFilter: false,
                    disabled: !isAdmin,
                    delay: 200,
                    delayOnTouchOnly: true,
                    touchStartThreshold: 5,
                    direction: 'vertical',
                    forceFallback: false,
                    fallbackOnBody: true,
                    swapThreshold: 0.65,
                    scrollSensitivity: 30,
                    scrollSpeed: 10,

                    onStart: function(evt) {
                        saveCardsScrollPosition();
                    },

                    // Keep add-card button at bottom during drag operations
                    onMove: function(evt, originalEvent) {
                        if (!isAdmin) return false;
                        const addCard = evt.to.querySelector('.add-card');
                        if (addCard && evt.related !== addCard) {
                            evt.to.appendChild(addCard);
                        }
                        return true;
                    },

                    onEnd: function(evt) {
                        const addCard = evt.to.querySelector('.add-card');
                        if (addCard) {
                            evt.to.appendChild(addCard);
                        }

                        if (!isAdmin) return;

                        const cardId = evt.item.dataset.taskId;
                        const oldListId = evt.from.dataset.listId;
                        const newListId = evt.to.dataset.listId;
                        const newPosition = evt.newIndex;

                        restoreCardsScrollPosition();

                        updateCardPosition(cardId, newListId, newPosition);

                        setTimeout(function() {
                            restoreCardsScrollPosition();
                            checkAndToggleOverflow();
                        }, 100);
                    }
                });
            });

            const columnsContainer = document.querySelector('.kanban-columns');
            if (columnsContainer) {
                kanbanColumnsSortable = new Sortable(columnsContainer, {
                    group: 'lists',
                    draggable: '.kanban-column',
                    handle: '.column-header',
                    ghostClass: 'sortable-ghost',
                    chosenClass: 'sortable-chosen',
                    dragClass: 'sortable-drag',
                    filter: '.add-list-form, .add-list',
                    preventOnFilter: false,
                    disabled: !isAdmin,
                    delay: 200,
                    delayOnTouchOnly: true,
                    touchStartThreshold: 5,
                    direction: 'horizontal',
                    forceFallback: false,
                    fallbackOnBody: true,
                    swapThreshold: 0.65,

                    onMove: function(evt, originalEvent) {
                        const addListBtn = evt.to.querySelector('.add-list');

                        if (addListBtn) {
                            const addListColumn = addListBtn.closest('.kanban-column');
                            if (evt.related === addListColumn && evt.willInsertAfter) {
                                return false;
                            }
                            if (!evt.related) {
                                return false;
                            }
                        }

                        return true;
                    },

                    onEnd: function(evt) {
                        const movedColumn = evt.item;
                        const listId = movedColumn.getAttribute('data-list-id');
                        const newBoardId = movedColumn.closest('.kanban-columns').getAttribute(
                            'data-board-id') || movedColumn.getAttribute('data-board-id');

                        const allColumns = Array.from(evt.to.querySelectorAll('.kanban-column'));
                        const addListColumn = allColumns.find(col => col.querySelector('.add-list'));
                        const columnsWithoutAdd = allColumns.filter(col => col !== addListColumn);
                        const newPosition = columnsWithoutAdd.indexOf(movedColumn);

                        if (addListColumn && addListColumn.parentNode) {
                            addListColumn.parentNode.appendChild(addListColumn);
                        }

                        console.log('List moved:', {
                            listId: listId,
                            toBoard: newBoardId,
                            newPosition: newPosition
                        });

                        updateListPosition(listId, newBoardId, newPosition);
                    }
                });
            }
        }

        function updateCardPosition(cardId, newListId, newPosition) {
            fetch(UPDATE_URL, {
                    method: 'PUT',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': CSRF_TOKEN
                    },
                    body: JSON.stringify({
                        card_id: cardId,
                        list_id: newListId,
                        position: newPosition,
                        action: 'move_card'
                    })
                })
                .then(res => res.json())
                .then(data => {
                    if (!data.success) {
                        console.error('Failed to update card position:', data.message);
                    }
                    restoreCardsScrollPosition();
                })
                .catch(error => {
                    console.error('Error updating card position:', error);
                    restoreCardsScrollPosition();
                });
        }

        function updateListPosition(listId, boardId, newPosition) {
            fetch(UPDATE_URL, {
                    method: 'PUT',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': CSRF_TOKEN
                    },
                    body: JSON.stringify({
                        action: 'move_list',
                        list_id: listId,
                        board_id: boardId,
                        position: newPosition
                    })
                })
                .then(res => res.json())
                .then(data => {
                    if (!data.success) {
                        console.error('Failed to update list position:', data.message);
                    }
                })
                .catch(error => console.error('Error updating list position:', error));
        }

        function initializeInlineEditForColumns() {
            document.querySelectorAll('.kanban-column').forEach(column => {
                const p = column.querySelector('.column-title-display');
                const input = column.querySelector('.column-title-edit');
                if (!p || !input) return;

                // Remove previous listeners to avoid duplicates
                p.onclick = null;
                input.onblur = null;
                input.onclick = null;

                // Only allow editing if user is admin
                if (!isAdmin) {
                    p.style.cursor = 'default';
                    return;
                }

                // Show input, hide p, and disable drag
                function activateEdit() {
                    p.classList.add('d-none');
                    input.classList.remove('d-none');
                    input.value = p.textContent;
                    input.focus();
                    input.select();
                    if (kanbanColumnsSortable) kanbanColumnsSortable.option('disabled', true);
                }

                // Show p, hide input, and re-enable drag
                function deactivateEdit(save) {
                    input.classList.add('d-none');
                    p.classList.remove('d-none');
                    if (kanbanColumnsSortable) kanbanColumnsSortable.option('disabled', false);
                    if (save) {
                        const newTitle = input.value.trim();
                        if (newTitle && newTitle !== p.textContent) {
                            p.textContent = newTitle;
                            updateListTitle(input); // Save via AJAX
                        } else {
                            input.value = p.textContent;
                        }
                    } else {
                        input.value = p.textContent;
                    }
                }

                p.addEventListener('click', function(e) {
                    activateEdit();
                });

                input.addEventListener('blur', function(e) {
                    deactivateEdit(true);
                });

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

        // Handle Enter/Escape for list title input
        function handleListTitleKeydown(event, inputElement) {
            if (event.key === 'Enter') {
                event.preventDefault();
                inputElement.blur(); // triggers save
            } else if (event.key === 'Escape') {
                // Cancel edit, revert value
                const column = inputElement.closest('.kanban-column');
                const p = column.querySelector('.column-title-display');
                inputElement.value = p.textContent;
                inputElement.blur();
            }
        }

        function updateListTitle(inputElement) {
            const listId = inputElement.dataset.listId;
            const newTitle = inputElement.value.trim();
            const originalTitle = inputElement.defaultValue;

            if (!newTitle || newTitle === originalTitle) {
                inputElement.value = originalTitle;
                return;
            }

            inputElement.disabled = true;

            fetch(UPDATE_URL, {
                    method: 'PUT',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': CSRF_TOKEN
                    },
                    body: JSON.stringify({
                        list_id: parseInt(listId),
                        title: newTitle,
                        action: 'update_list_title'
                    })
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        showAlert('success', 'Berhasil memperbarui judul list!');
                        inputElement.defaultValue = newTitle;
                    } else {
                        inputElement.value = originalTitle;
                        const errorMsg = data.errors ? Object.values(data.errors).flat().join(', ') : (data.message ||
                            'Unknown error');
                        showAlert('danger', `Gagal memperbarui judul list: ${errorMsg}`);
                    }
                })
                .catch(error => {
                    console.error('Error updating list title:', error);
                    inputElement.value = originalTitle;
                    showAlert('danger', 'Gagal memperbarui judul list. Silakan coba lagi.');
                })
                .finally(() => {
                    inputElement.disabled = false;
                });
        }

        // Inline edit for board title: toggle between <h6> and <input>
        document.addEventListener('DOMContentLoaded', function() {
            const boardTitleDisplay = document.querySelector('.board-title-display');
            const boardTitleInput = document.querySelector('.board-title-input');

            if (!boardTitleDisplay || !boardTitleInput) return;

            // Only allow editing if user is admin
            if (!isAdmin) {
                boardTitleDisplay.style.cursor = 'default';
                return;
            }

            function activateBoardEdit() {
                boardTitleDisplay.classList.add('d-none');
                boardTitleInput.classList.remove('d-none');
                boardTitleInput.value = boardTitleDisplay.textContent.trim();
                boardTitleInput.focus();
                boardTitleInput.select();
            }

            function deactivateBoardEdit(save) {
                boardTitleInput.classList.add('d-none');
                boardTitleDisplay.classList.remove('d-none');
                if (save) {
                    const newTitle = boardTitleInput.value.trim();
                    if (newTitle && newTitle !== boardTitleDisplay.textContent) {
                        boardTitleDisplay.textContent = newTitle;
                        updateBoardTitle(boardTitleInput); // Save via AJAX
                    } else {
                        boardTitleInput.value = boardTitleDisplay.textContent;
                    }
                } else {
                    boardTitleInput.value = boardTitleDisplay.textContent;
                }
            }

            boardTitleDisplay.addEventListener('click', function() {
                activateBoardEdit();
            });

            boardTitleInput.addEventListener('blur', function() {
                deactivateBoardEdit(true);
            });

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

        function handleBoardTitleKeydown(event, inputElement) {
            if (event.key === 'Enter') {
                event.preventDefault();
                inputElement.blur();
            } else if (event.key === 'Escape') {
                const display = document.querySelector('.board-title-display');
                inputElement.value = display.textContent;
                inputElement.blur();
            }
        }

        function updateBoardTitle(inputElement) {
            const boardId = inputElement.dataset.boardId;
            const newTitle = inputElement.value.trim();
            const originalTitle = inputElement.defaultValue;

            if (!newTitle || newTitle === originalTitle) {
                inputElement.value = originalTitle;
                return;
            }

            inputElement.disabled = true;

            fetch(UPDATE_URL, {
                    method: 'PUT',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': CSRF_TOKEN
                    },
                    body: JSON.stringify({
                        board_id: parseInt(boardId),
                        title: newTitle,
                        action: 'update_board_title'
                    })
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        showAlert('success', 'Judul board telah diperbarui!');
                        inputElement.defaultValue = newTitle;
                    } else {
                        inputElement.value = originalTitle;
                        const errorMsg = data.errors ? Object.values(data.errors).flat().join(', ') : (data.message ||
                            'Unknown error');
                        showAlert('danger', `Gagal memperbarui judul board: ${errorMsg}`);
                    }
                })
                .catch(error => {
                    console.error('Error updating board title:', error);
                    inputElement.value = originalTitle;
                    showAlert('danger', 'Gagal memperbarui judul board. Silakan coba lagi.');
                })
                .finally(() => {
                    inputElement.disabled = false;
                });
        }

        // Re-initialize sortable after adding new lists
        function reinitializeSortableAfterListAdd() {
            setTimeout(() => {
                initializeSortable();
            }, 100);
        }

        // Archive dropdown logic
        function archiveDropdown() {

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

        function toggleArchiveCardBtn(event, cardId) {
            event.stopPropagation();
            // Toggle tombol archive pada card yang dipilih
            const archiveBtn = document.getElementById('archive-card-btn-' + cardId);
            archiveBtn.classList.toggle('d-none');
        }

        function switchToLists() {
            document.querySelector('.archive-cards-menu').classList.add('d-none');
            document.querySelector('.archive-lists-menu').classList.remove('d-none');
        }

        function switchToCards() {
            document.querySelector('.archive-lists-menu').classList.add('d-none');
            document.querySelector('.archive-cards-menu').classList.remove('d-none');
        }

        function showArchiveCardBtn(cardId) {
            document.querySelectorAll('.card-archive-btn').forEach(btn => btn.classList.add('d-none'));
            document.getElementById('archive-card-btn-' + cardId).classList.remove('d-none');
        }

        const ARCHIVE_CARD_URL = "{{ url('archive/card') }}";
        const ARCHIVE_LIST_URL = "{{ url('archive/list') }}";
        const RESTORE_CARD_URL = "{{ url('restore/card') }}";
        const RESTORE_LIST_URL = "{{ url('restore/list') }}";
        const DELETE_CARD_URL = "{{ url('delete/card') }}";
        const DELETE_LIST_URL = "{{ url('delete/list') }}";

        function archiveCard(cardId) {
            // Tampilkan spinner
            const spinner = document.getElementById(`archive-card-spinner-${cardId}`);
            const button = document.getElementById(`archive-card-btn-${cardId}`);

            if (spinner) {
                spinner.classList.remove('d-none');
            }
            if (button) {
                button.style.pointerEvents = 'none';
                button.style.opacity = '0.7';
            }

            fetch(ARCHIVE_CARD_URL, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': CSRF_TOKEN,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        card_id: cardId
                    })
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        // Tutup dropdown sebelum reload
                        const dropdownBtn = document.getElementById(`cardActionDropdownBtn-${cardId}`);
                        if (dropdownBtn) {
                            const bsDropdown = bootstrap.Dropdown.getInstance(dropdownBtn);
                            if (bsDropdown) {
                                bsDropdown.hide();
                            }
                        }

                        // Beri delay singkat agar dropdown tertutup dengan smooth, lalu reload
                        setTimeout(() => {
                            location.reload();
                        }, 300);
                    } else {
                        // Sembunyikan spinner jika gagal
                        if (spinner) {
                            spinner.classList.add('d-none');
                        }
                        if (button) {
                            button.style.pointerEvents = '';
                            button.style.opacity = '';
                        }
                        showAlert('danger', 'Gagal mengarsipkan card.');
                    }
                })
                .catch(error => {
                    console.error('Error archiving card:', error);
                    // Sembunyikan spinner jika error
                    if (spinner) {
                        spinner.classList.add('d-none');
                    }
                    if (button) {
                        button.style.pointerEvents = '';
                        button.style.opacity = '';
                    }
                    showAlert('danger', 'Gagal mengarsipkan card.');
                });
        }

        function archiveList(listId) {
            // Tampilkan spinner
            const spinner = document.getElementById(`archive-list-spinner-${listId}`);
            const button = document.getElementById(`archive-list-btn-${listId}`);

            if (spinner) {
                spinner.classList.remove('d-none');
            }
            if (button) {
                button.style.pointerEvents = 'none';
                button.style.opacity = '0.7';
            }

            fetch(ARCHIVE_LIST_URL, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': CSRF_TOKEN,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        list_id: listId
                    })
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        // Tutup dropdown sebelum reload
                        const dropdownBtn = document.getElementById(`listActionDropdownBtn-${listId}`);
                        if (dropdownBtn) {
                            const bsDropdown = bootstrap.Dropdown.getInstance(dropdownBtn);
                            if (bsDropdown) {
                                bsDropdown.hide();
                            }
                        }

                        // Beri delay singkat agar dropdown tertutup dengan smooth, lalu reload
                        setTimeout(() => {
                            location.reload();
                        }, 300);
                    } else {
                        // Sembunyikan spinner jika gagal
                        if (spinner) {
                            spinner.classList.add('d-none');
                        }
                        if (button) {
                            button.style.pointerEvents = '';
                            button.style.opacity = '';
                        }
                        showAlert('danger', 'Gagal mengarsipkan list.');
                    }
                })
                .catch(error => {
                    console.error('Error archiving list:', error);
                    // Sembunyikan spinner jika error
                    if (spinner) {
                        spinner.classList.add('d-none');
                    }
                    if (button) {
                        button.style.pointerEvents = '';
                        button.style.opacity = '';
                    }
                    showAlert('danger', 'Gagal mengarsipkan list.');
                });
        }

        function restoreCard(cardId) {
            // Tampilkan spinner
            const spinner = document.getElementById(`restore-card-spinner-${cardId}`);
            const button = document.getElementById(`restore-card-btn-${cardId}`);

            if (spinner) {
                spinner.classList.remove('d-none');
            }
            if (button) {
                button.style.pointerEvents = 'none';
                button.style.opacity = '0.6';
            }

            fetch(RESTORE_CARD_URL, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': CSRF_TOKEN,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        card_id: cardId
                    })
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        // Tutup dropdown archive sebelum reload
                        const archiveDropdown = document.getElementById('archiveDropdownBtn');
                        if (archiveDropdown) {
                            const bsDropdown = bootstrap.Dropdown.getInstance(archiveDropdown);
                            if (bsDropdown) {
                                bsDropdown.hide();
                            }
                        }

                        setTimeout(() => {
                            location.reload();
                        }, 300);
                    } else {
                        // Sembunyikan spinner jika gagal
                        if (spinner) {
                            spinner.classList.add('d-none');
                        }
                        if (button) {
                            button.style.pointerEvents = '';
                            button.style.opacity = '';
                        }
                        showAlert('danger', 'Gagal memulihkan card.');
                    }
                })
                .catch(error => {
                    console.error('Error restoring card:', error);
                    // Sembunyikan spinner jika error
                    if (spinner) {
                        spinner.classList.add('d-none');
                    }
                    if (button) {
                        button.style.pointerEvents = '';
                        button.style.opacity = '';
                    }
                    showAlert('danger', 'Gagal memulihkan card.');
                });
        }

        function deleteCard(cardId) {
            // Tampilkan spinner
            const spinner = document.getElementById(`delete-card-spinner-${cardId}`);
            const button = document.getElementById(`delete-card-btn-${cardId}`);

            if (spinner) {
                spinner.classList.remove('d-none');
            }
            if (button) {
                button.style.pointerEvents = 'none';
                button.style.opacity = '0.6';
            }

            fetch(DELETE_CARD_URL, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': CSRF_TOKEN,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        card_id: cardId
                    })
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        // Tutup dropdown archive sebelum reload
                        const archiveDropdown = document.getElementById('archiveDropdownBtn');
                        if (archiveDropdown) {
                            const bsDropdown = bootstrap.Dropdown.getInstance(archiveDropdown);
                            if (bsDropdown) {
                                bsDropdown.hide();
                            }
                        }

                        setTimeout(() => {
                            location.reload();
                        }, 300);
                    } else {
                        // Sembunyikan spinner jika gagal
                        if (spinner) {
                            spinner.classList.add('d-none');
                        }
                        if (button) {
                            button.style.pointerEvents = '';
                            button.style.opacity = '';
                        }
                        showAlert('danger', 'Gagal menghapus card.');
                    }
                })
                .catch(error => {
                    console.error('Error deleting card:', error);
                    // Sembunyikan spinner jika error
                    if (spinner) {
                        spinner.classList.add('d-none');
                    }
                    if (button) {
                        button.style.pointerEvents = '';
                        button.style.opacity = '';
                    }
                    showAlert('danger', 'Gagal menghapus card.');
                });
        }

        function restoreList(listId) {
            // Tampilkan spinner dan sembunyikan teks
            const spinner = document.getElementById(`restore-list-spinner-${listId}`);
            const button = document.getElementById(`restore-list-btn-${listId}`);
            const text = document.getElementById(`restore-list-text-${listId}`);

            if (text) {
                text.classList.add('d-none');
            }
            if (spinner) {
                spinner.classList.remove('d-none');
            }
            if (button) {
                button.style.pointerEvents = 'none';
                button.style.opacity = '0.6';
            }

            fetch(RESTORE_LIST_URL, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': CSRF_TOKEN,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        list_id: listId
                    })
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        // Tutup dropdown archive sebelum reload
                        const archiveDropdown = document.getElementById('archiveDropdownBtn');
                        if (archiveDropdown) {
                            const bsDropdown = bootstrap.Dropdown.getInstance(archiveDropdown);
                            if (bsDropdown) {
                                bsDropdown.hide();
                            }
                        }

                        setTimeout(() => {
                            location.reload();
                        }, 300);
                    } else {
                        // Kembalikan teks dan sembunyikan spinner jika gagal
                        if (text) {
                            text.classList.remove('d-none');
                        }
                        if (spinner) {
                            spinner.classList.add('d-none');
                        }
                        if (button) {
                            button.style.pointerEvents = '';
                            button.style.opacity = '';
                        }
                        showAlert('danger', 'Gagal memulihkan list.');
                    }
                })
                .catch(error => {
                    console.error('Error restoring list:', error);
                    // Kembalikan teks dan sembunyikan spinner jika error
                    if (text) {
                        text.classList.remove('d-none');
                    }
                    if (spinner) {
                        spinner.classList.add('d-none');
                    }
                    if (button) {
                        button.style.pointerEvents = '';
                        button.style.opacity = '';
                    }
                    showAlert('danger', 'Gagal memulihkan list.');
                });
        }

        function deleteList(listId) {
            // Tampilkan spinner dan sembunyikan teks
            const spinner = document.getElementById(`delete-list-spinner-${listId}`);
            const button = document.getElementById(`delete-list-btn-${listId}`);
            const text = document.getElementById(`delete-list-text-${listId}`);

            if (text) {
                text.classList.add('d-none');
            }
            if (spinner) {
                spinner.classList.remove('d-none');
            }
            if (button) {
                button.style.pointerEvents = 'none';
                button.style.opacity = '0.6';
            }

            fetch(DELETE_LIST_URL, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': CSRF_TOKEN,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        list_id: listId
                    })
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        // Tutup dropdown archive sebelum reload
                        const archiveDropdown = document.getElementById('archiveDropdownBtn');
                        if (archiveDropdown) {
                            const bsDropdown = bootstrap.Dropdown.getInstance(archiveDropdown);
                            if (bsDropdown) {
                                bsDropdown.hide();
                            }
                        }

                        setTimeout(() => {
                            location.reload();
                        }, 300);
                    } else {
                        // Kembalikan teks dan sembunyikan spinner jika gagal
                        if (text) {
                            text.classList.remove('d-none');
                        }
                        if (spinner) {
                            spinner.classList.add('d-none');
                        }
                        if (button) {
                            button.style.pointerEvents = '';
                            button.style.opacity = '';
                        }
                        showAlert('danger', 'Gagal menghapus list.');
                    }
                })
                .catch(error => {
                    console.error('Error deleting list:', error);
                    // Kembalikan teks dan sembunyikan spinner jika error
                    if (text) {
                        text.classList.remove('d-none');
                    }
                    if (spinner) {
                        spinner.classList.add('d-none');
                    }
                    if (button) {
                        button.style.pointerEvents = '';
                        button.style.opacity = '';
                    }
                    showAlert('danger', 'Gagal menghapus list.');
                });
        }

        // Filter dropdown logic
        function filterDropdown() {

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

            // Get filter elements
            const filterSearch = document.getElementById('filterSearch');
            const dueNextDay = document.getElementById('dueNextDay');
            const dueNextWeek = document.getElementById('dueNextWeek');
            const dueNextMonth = document.getElementById('dueNextMonth');
            const labelOverdue = document.getElementById('labelOverdue');
            const labelUrgent = document.getElementById('labelUrgent');
            const labelImportant = document.getElementById('labelImportant');

            const dateCardFrom = document.getElementById('datecardfrom');
            const dateCardTo = document.getElementById('datecardto');
            const dateDeadlineFrom = document.getElementById('datedeadlinefrom');
            const dateDeadlineTo = document.getElementById('datedeadlineto');
            let filteredCardCount = document.querySelectorAll('.task-card').length;
            // Add event listeners for filter changes
            if (filterSearch) {
                filterSearch.addEventListener('input', applyFilters);
            }
            if (dueNextDay) {
                dueNextDay.addEventListener('change', applyFilters);
            }
            if (dueNextWeek) {
                dueNextWeek.addEventListener('change', applyFilters);
            }
            if (dueNextMonth) {
                dueNextMonth.addEventListener('change', applyFilters);
            }
            if (labelOverdue) {
                labelOverdue.addEventListener('change', applyFilters);
            }
            if (labelUrgent) {
                labelUrgent.addEventListener('change', applyFilters);
            }
            if (labelImportant) {
                labelImportant.addEventListener('change', applyFilters);
            }
            if (dateCardFrom) {
                dateCardFrom.addEventListener('change', applyFilters);
            }
            if (dateCardTo) {
                dateCardTo.addEventListener('change', applyFilters);
            }

            if (dateDeadlineFrom) {
                dateDeadlineFrom.addEventListener('change', applyFilters);
            }

            if (dateDeadlineTo) {
                dateDeadlineTo.addEventListener('change', applyFilters);
            }

            // Apply filters function
            function applyFilters() {
                const searchTerm = filterSearch ? filterSearch.value.toLowerCase().trim() : '';
                const isDueNextDay = dueNextDay ? dueNextDay.checked : false;
                const isDueNextWeek = dueNextWeek ? dueNextWeek.checked : false;
                const isDueNextMonth = dueNextMonth ? dueNextMonth.checked : false;
                const isLabelOverdue = labelOverdue ? labelOverdue.checked : false;
                const isLabelUrgent = labelUrgent ? labelUrgent.checked : false;
                const isLabelImportant = labelImportant ? labelImportant.checked : false;

                const createdFrom = dateCardFrom ? dateCardFrom.value : '';
                const createdTo = dateCardTo ? dateCardTo.value : '';
                const createddeadlineFrom = dateDeadlineFrom ? dateDeadlineFrom.value : '';
                const createddeadlineTo = dateDeadlineTo ? dateDeadlineTo.value : '';

                const allCards = document.querySelectorAll('.task-card');
                let visibleCardCount = 0;

                allCards.forEach(card => {
                    let shouldShow = true;

                    // Filter by keyword
                    if (searchTerm) {
                        const title = card.querySelector('.task-title')?.textContent.toLowerCase() || '';
                        const user = card.querySelector('.task-user')?.textContent.toLowerCase() || '';

                        if (!title.includes(searchTerm) && !user.includes(searchTerm)) {
                            shouldShow = false;
                        }
                    }

                    // Filter by due date
                    if (shouldShow && (isDueNextDay || isDueNextWeek || isDueNextMonth)) {
                        const dueDateElement = card.querySelector('.due-date');
                        let dueDateMatch = false;

                        if (dueDateElement) {
                            const dueDateText = dueDateElement.textContent.trim();
                            // Parse date format "d M y" (e.g., "15 Oct 24")
                            const dueDate = parseDateFromText(dueDateText);
                            const now = new Date();
                            now.setHours(0, 0, 0, 0); // Reset time for accurate day comparison

                            if (dueDate) {
                                const timeDiff = dueDate.getTime() - now.getTime();
                                const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));

                                if (isDueNextDay && daysDiff <= 1 && daysDiff >= 0) {
                                    dueDateMatch = true;
                                }
                                if (isDueNextWeek && daysDiff <= 7 && daysDiff >= 0) {
                                    dueDateMatch = true;
                                }
                                if (isDueNextMonth && daysDiff <= 30 && daysDiff >= 0) {
                                    dueDateMatch = true;
                                }
                            }
                        }

                        if (!dueDateMatch) {
                            shouldShow = false;
                        }
                    }

                    // Filter by label/priority - using border color as indicator
                    if (shouldShow && (isLabelOverdue || isLabelUrgent || isLabelImportant)) {
                        const cardBorder = card.querySelector('.task-card-border');
                        let labelMatch = false;

                        if (cardBorder) {
                            const borderClasses = cardBorder.className;

                            // Black border = Overdue (sudah melewati deadline)
                            if (isLabelOverdue && borderClasses.includes('task-card-border-black')) {
                                labelMatch = true;
                            }
                            // Red border = Urgent/High priority (kurang dari 7 hari)
                            if (isLabelUrgent && borderClasses.includes('task-card-border-red')) {
                                labelMatch = true;
                            }
                            // Blue border = Normal/Medium priority (lebih dari 7 hari)
                            if (isLabelImportant && borderClasses.includes('task-card-border-blue')) {
                                labelMatch = true;
                            }
                        }

                        if (!labelMatch) {
                            shouldShow = false;
                        }
                    }

                    // Filter by created_at card
                    if (shouldShow && (createdFrom || createdTo)) {
                        const cardCreatedAt = parseInt(card.getAttribute('data-created-at') || '0');

                        const createdFromTimestamp = createdFrom ?
                            Math.floor(new Date(createdFrom + 'T00:00:00').getTime() / 1000) :
                            null;

                        const createdToTimestamp = createdTo ?
                            Math.floor(new Date(createdTo + 'T23:59:59').getTime() / 1000) :
                            null;

                        let createdDateMatch = true;

                        if (!cardCreatedAt) {
                            createdDateMatch = false;
                        }

                        if (createdFromTimestamp && cardCreatedAt < createdFromTimestamp) {
                            createdDateMatch = false;
                        }

                        if (createdToTimestamp && cardCreatedAt > createdToTimestamp) {
                            createdDateMatch = false;
                        }

                        if (!createdDateMatch) {
                            shouldShow = false;
                        }
                    }

                    // Filter by deadline card
                    if (shouldShow && (createddeadlineFrom || createddeadlineTo)) {
                        const carddeadline = parseInt(card.getAttribute('data-due-date') || '0');

                        const createdFromdeadline = createddeadlineFrom ?
                            Math.floor(new Date(createddeadlineFrom + 'T00:00:00').getTime() / 1000) :
                            null;

                        const createdTodeadline = createddeadlineTo ?
                            Math.floor(new Date(createddeadlineTo + 'T23:59:59').getTime() / 1000) :
                            null;

                        let createdDateDeadline = true;

                        if (!carddeadline) {
                            createdDateDeadline = false;
                        }

                        if (createdFromdeadline && carddeadline < createdFromdeadline) {
                            createdDateDeadline = false;
                        }

                        if (createdTodeadline && carddeadline > createdTodeadline) {
                            createdDateDeadline = false;
                        }

                        if (!createdDateDeadline) {
                            shouldShow = false;
                        }
                    }

                    // Show/hide card with animation
                    if (shouldShow) {
                        card.dataset.filterVisible = '1';
                        card.style.display = '';
                        card.style.opacity = '1';
                        card.style.transform = 'scale(1)';
                        visibleCardCount++;
                    } else {
                        card.dataset.filterVisible = '0';
                        card.style.transition = 'all 0.3s ease';
                        card.style.opacity = '0';
                        card.style.transform = 'scale(0.8)';
                        setTimeout(() => {
                            if (card.style.opacity === '0') {
                                card.style.display = 'none';
                            }
                        }, 300);
                    }
                });
                filteredCardCount = visibleCardCount;
                updateFilterButtonState();
                updateFilterStatus(visibleCardCount, allCards.length);

                console.log(`Filter applied: ${visibleCardCount} cards visible out of ${allCards.length} total`);
            }

            // Helper function to parse date from text format like "15 Oct 24"
            function parseDateFromText(dateText) {
                if (!dateText) return null;

                const monthNames = {
                    'Jan': 0,
                    'Feb': 1,
                    'Mar': 2,
                    'Apr': 3,
                    'May': 4,
                    'Jun': 5,
                    'Jul': 6,
                    'Aug': 7,
                    'Sep': 8,
                    'Oct': 9,
                    'Nov': 10,
                    'Dec': 11
                };

                const parts = dateText.split(' ');
                if (parts.length !== 3) return null;

                const day = parseInt(parts[0]);
                const monthName = parts[1];
                const year = parseInt('20' + parts[2]); // Convert "24" to "2024"

                if (monthNames.hasOwnProperty(monthName)) {
                    return new Date(year, monthNames[monthName], day);
                }

                return null;
            }

            function hasActiveFilters() {
                return (
                    (filterSearch && filterSearch.value.trim()) ||
                    (dueNextDay && dueNextDay.checked) ||
                    (dueNextWeek && dueNextWeek.checked) ||
                    (dueNextMonth && dueNextMonth.checked) ||
                    (labelOverdue && labelOverdue.checked) ||
                    (labelUrgent && labelUrgent.checked) ||
                    (labelImportant && labelImportant.checked) ||
                   (dateCardFrom && dateCardFrom.value) ||
                    (dateCardTo && dateCardTo.value) ||
                    (dateDeadlineFrom && dateDeadlineFrom.value) ||
                    (dateDeadlineTo && dateDeadlineTo.value)
                );
            }

            function getActiveFilterCount() {
                let activeCount = 0;

                if (filterSearch && filterSearch.value.trim()) activeCount++;
                if (dueNextDay && dueNextDay.checked) activeCount++;
                if (dueNextWeek && dueNextWeek.checked) activeCount++;
                if (dueNextMonth && dueNextMonth.checked) activeCount++;
                if (labelOverdue && labelOverdue.checked) activeCount++;
                if (labelUrgent && labelUrgent.checked) activeCount++;
                if (labelImportant && labelImportant.checked) activeCount++;

                // range tanggal dihitung 1 filter kalau salah satu terisi
                 if ((dateCardFrom && dateCardFrom.value) || (dateCardTo && dateCardTo.value)) {
                    activeCount++;
                }

                if ((dateDeadlineFrom && dateDeadlineFrom.value) || (dateDeadlineTo && dateDeadlineTo.value)) {
                    activeCount++;
                }

                return activeCount;
            }

            function getFilteredCardCount() {
                let count = 0;

                document.querySelectorAll('.task-card').forEach(card => {
                    const isHidden =
                        card.style.display === 'none' ||
                        card.classList.contains('d-none') ||
                        card.closest('.d-none');

                    if (!isHidden) {
                        count++;
                    }
                });

                return count;
            }

            // Update filter button state
            function updateFilterButtonState() {
                const filterBtn = document.getElementById('filterDropdownBtn');

                if (filterBtn) {
                    // Remove existing badge
                    const existingBadge = filterBtn.querySelector('.filter-badge');
                    if (existingBadge) {
                        existingBadge.remove();
                    }

                    if (hasActiveFilters) {
                        filterBtn.classList.add('active-filter');
                        filterBtn.style.background = '#1171ef';
                        filterBtn.style.color = 'white';

                        // Add badge with count
                        const badge = document.createElement('span');
                        badge.className = 'filter-badge';
                       badge.textContent = filteredCardCount;
                        badge.style.cssText = `
                        position: absolute;
                        top: -5px;
                        right: -5px;
                        background: #ff4757;
                        color: white;
                        border-radius: 50%;
                        width: 18px;
                        height: 18px;
                        font-size: 10px;
                        font-weight: bold;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        z-index: 10;
                    `;
                        filterBtn.style.position = 'relative';
                        filterBtn.appendChild(badge);
                    } else {
                        filterBtn.classList.remove('active-filter');
                        filterBtn.style.background = '';
                        filterBtn.style.color = '';
                        filterBtn.style.position = '';
                    }
                }
            }

            // Clear all filters function
            window.clearAllFilters = function() {
                if (filterSearch) filterSearch.value = '';

                if (dueNextDay) dueNextDay.checked = false;
                if (dueNextWeek) dueNextWeek.checked = false;
                if (dueNextMonth) dueNextMonth.checked = false;

                if (labelOverdue) labelOverdue.checked = false;
                if (labelUrgent) labelUrgent.checked = false;
                if (labelImportant) labelImportant.checked = false;

                if (dateCardFrom) dateCardFrom.value = '';
                if (dateCardTo) dateCardTo.value = '';

                if (dateDeadlineFrom) dateDeadlineFrom.value = '';
                if (dateDeadlineTo) dateDeadlineTo.value = '';


                applyFilters();
            };

            // Update filter status display
            function updateFilterStatus(visibleCount, totalCount) {
                const filterStatus = document.getElementById('filterStatus');
                const filterCount = document.getElementById('filterCount');

                if (filterStatus && filterCount) {
                    const hasActiveFilters = (
                        (filterSearch && filterSearch.value.trim()) ||

                        (dueNextDay && dueNextDay.checked) ||
                        (dueNextWeek && dueNextWeek.checked) ||
                        (dueNextMonth && dueNextMonth.checked) ||

                        (labelOverdue && labelOverdue.checked) ||
                        (labelUrgent && labelUrgent.checked) ||
                        (labelImportant && labelImportant.checked) ||

                        (dateCardFrom && dateCardFrom.value) ||
                        (dateCardTo && dateCardTo.value) ||

                        (dateDeadlineFrom && dateDeadlineFrom.value) ||
                        (dateDeadlineTo && dateDeadlineTo.value)
                    );

                    if (hasActiveFilters) {
                        filterStatus.classList.add('d-none');
                        filterCount.classList.remove('d-none');

                        if (visibleCount === 0) {
                            filterCount.textContent = `Tidak ada kartu yang sesuai.`;
                            filterCount.className = 'text-warning d-block mb-3';
                        } else if (visibleCount === totalCount) {
                            filterCount.textContent = `Ditemukan ${totalCount} card.`;
                            filterCount.className = 'text-success d-block mb-3';
                        } else {
                            filterCount.textContent = `Ditemukan ${visibleCount} dari ${totalCount} card.`;
                            filterCount.className = 'text-primary d-block mb-3';
                        }
                    } else {
                        filterStatus.classList.remove('d-none');
                        filterCount.classList.add('d-none');
                    }
                }
            }

        }

        // Board member dropdown logic
        function memberDropdown() {

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

            let availableUsers = [];
            let boardMembers = @json($board_users ?? []);
            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            const boardOwner = @json($board_owner ?? '');

            // Pagination variables for available users
            let currentPage = 1;
            let hasMoreUsers = true;
            let isLoadingUsers = false;
            let currentSearchTerm = '';

            function ajaxMemberAction(action, payload, callback, errorCallback) {
                fetch("{{ url($url_menu) . '/board-member' }}", {
                        method: 'POST',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken
                        },
                        body: JSON.stringify({
                            action,
                            ...payload
                        })
                    })
                    .then(res => res.json())
                    .then(data => {
                        if (data.success) {
                            callback && callback(data);
                        } else {
                            showAlert('danger', data.message || `Aksi gagal.`);
                            errorCallback && errorCallback(data);
                        }
                    })
                    .catch((error) => {
                        showAlert('danger', `Network error.`);
                        errorCallback && errorCallback(error);
                    });
            }

            // Load available users with AJAX (paginated)
            function loadAvailableUsers(reset = false) {
                if (isLoadingUsers || (!hasMoreUsers && !reset)) return;

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

                if (reset) {
                    currentPage = 1;
                    hasMoreUsers = true;
                    availableUsers = [];
                    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 = 'loadingMoreUsers';
                    loadingDiv.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Memuat lebih banyak...';
                    container.appendChild(loadingDiv);
                }

                const apiUrl =
                    `{{ url('/boards/available-users') }}?board_id={{ $board->id }}&page=${currentPage}&per_page=5&search=${encodeURIComponent(currentSearchTerm)}`;

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

                            availableUsers = reset ? data.users : [...availableUsers, ...data.users];
                            hasMoreUsers = data.pagination.has_more;
                            renderAvailableUsers();
                        } else {
                            const errorMsg = data.message || 'Failed to load users';
                            console.error('API Error:', errorMsg);
                            container.innerHTML = `<p class="text-danger text-center py-2">${errorMsg}</p>`;
                        }
                    })
                    .catch(error => {
                        console.error('Error loading users:', error);
                        container.innerHTML =
                            '<p class="text-danger text-center py-2">Gagal memuat pengguna. Silakan refresh halaman.</p>';
                    })
                    .finally(() => {
                        isLoadingUsers = false;
                    });
            }

            function renderAvailableUsers() {
                const container = document.getElementById('availableUsers');
                // Filter out users who are already board members
                const unselectedUsers = availableUsers.filter(user =>
                    !boardMembers.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 yang tersedia</p>';
                    return;
                }

                // Show message if current batch has no available users but more pages exist
                if (unselectedUsers.length === 0 && hasMoreUsers) {
                    container.innerHTML =
                        '<p class="dropdown-label text-muted text-center py-2">Semua pengguna di halaman ini sudah menjadi anggota.</p>';
                    // Still show load more button
                    const loadMoreBtn = document.createElement('div');
                    loadMoreBtn.className = 'text-center py-2';
                    loadMoreBtn.innerHTML =
                        '<button type="button" class="btn btn-sm btn-outline-primary" id="loadMoreUsersBtn">Muat lebih banyak pengguna</button>';
                    container.appendChild(loadMoreBtn);

                    document.getElementById('loadMoreUsersBtn').addEventListener('click', function(e) {
                        e.stopPropagation();
                        currentPage++;
                        loadAvailableUsers(false);
                    });
                    return;
                }

                const userItems = unselectedUsers.map(user => `
                    <div class="user-item ${currentUserRole !== 'admin' ? 'non-admin-disabled' : ''}" data-user-id="${user.id}" style="cursor:${currentUserRole !== 'admin' ? 'not-allowed' : 'pointer'};">
                        <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="loadMoreUsersBtn">Muat lebih banyak pengguna</button>';
                    container.appendChild(loadMoreBtn);

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

                // Add click handlers for the entire user-item div
                container.querySelectorAll('.user-item').forEach(item => {
                    item.addEventListener('click', function(e) {
                        e.stopPropagation();

                        // Only allow admins to add members
                        if (currentUserRole !== 'admin') {
                            return;
                        }

                        const userId = parseInt(this.dataset.userId);
                        const user = availableUsers.find(u => u.id === userId);
                        if (user && !boardMembers.some(member => member.id === userId)) {
                            openAddMemberModal(user);
                        }
                    });
                });
            }

            function renderBoardMembers() {
                const container = document.getElementById('boardMembers');

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

                const memberItems = boardMembers.map(member => {

                    const memberUsername = String(member.username || '');
                    const ownerUsername = String(boardOwner || '');

                    const isOwner = memberUsername === ownerUsername;
                    const isSelf = String(member.id) === String(currentUserId);

                    let roleLabel = isOwner ? 'Owner' : (member.role || 'Member');
                    let dropdownDisabled = false;

                    if (isOwner) {
                        dropdownDisabled = true;
                    } else if (isSelf) {
                        dropdownDisabled = true;
                    } else if (currentUserRole !== 'admin') {
                        dropdownDisabled = true;
                    }

                    // Normalize current role for comparison (case-insensitive)
                    const currentRole = (member.role || 'Member').toLowerCase();
                    const isAdmin = currentRole === 'admin';
                    const isMember = currentRole === 'member';

                    return `
                    <div class="selected-member-dropdown-item" data-user-id="${member.id}">
                    <img src="${member.image}" alt="${member.name}" class="user-avatar">
                    <div class="user-info flex-grow-1">
                        <h6>${member.name}</h6>
                    </div>
                    <div class="role-dropdown">
                        <button
                        class="btn btn-outline-primary btn-sm m-0 px-3 py-2 dropdown-toggle text-capitalize role-dropdown-btn"
                        type="button"
                        data-bs-toggle="dropdown"
                        data-bs-auto-close="true"
                        aria-expanded="false"
                        data-user-id="${member.id}"
                        ${dropdownDisabled ? 'disabled' : ''}
                        >
                        <span class="role-text">${roleLabel}</span>
                        <span class="role-loading d-none">
                            <i class="fas fa-spinner fa-spin"></i>
                        </span>
                        </button>
                        <ul class="dropdown-menu role-dropdown-menu" style="width: 320px;">
                        ${isOwner ? `
                                                                                    <li>
                                                                                        <span class="dropdown-item px-3 py-2 text-muted d-flex justify-content-between align-items-center">
                                                                                        <span>Owner</span>
                                                                                        <i class="fas fa-check"></i>
                                                                                        </span>
                                                                                    </li>
                                                                                    ` : `
                                                                                    <li>
                                                                                        <a class="dropdown-item px-3 py-4 set-role-btn d-flex justify-content-between align-items-center ${isAdmin ? 'active disabled' : ''} ${dropdownDisabled ? 'disabled' : ''}" href="#" data-user-id="${member.id}" data-role="Admin">
                                                                                        <span>Admin</span>
                                                                                        <i class="fas fa-check ${isAdmin ? '' : 'invisible'}"></i>
                                                                                        </a>
                                                                                    </li>
                                                                                    <li>
                                                                                        <a class="dropdown-item px-3 py-4 set-role-btn d-flex justify-content-between align-items-center ${isMember ? 'active disabled' : ''} ${dropdownDisabled ? 'disabled' : ''}" href="#" data-user-id="${member.id}" data-role="Member">
                                                                                        <span>Member</span>
                                                                                        <i class="fas fa-check ${isMember ? '' : 'invisible'}"></i>
                                                                                        </a>
                                                                                    </li>
                                                                                    <li><hr class="dropdown-divider"></li>
                                                                                    <li>
                                                                                        <a class="dropdown-item px-3 py-2 text-danger remove-board-member-btn ${dropdownDisabled ? 'disabled' : ''}" href="#" data-user-id="${member.id}">
                                                                                        Hapus dari board ini
                                                                                        </a>
                                                                                    </li>
                                                                                    `}
                        </ul>
                    </div>
                    </div>
                `;
                }).join('');

                container.innerHTML = memberItems;

                // Configure role dropdowns with proper Popper.js settings
                container.querySelectorAll('.role-dropdown-btn').forEach(btn => {
                    let scrollListener = null;

                    btn.addEventListener('show.bs.dropdown', function(event) {
                        // Close all other open role dropdowns
                        container.querySelectorAll('.role-dropdown-btn').forEach(otherBtn => {
                            if (otherBtn !== this) {
                                const otherDropdown = bootstrap.Dropdown.getInstance(otherBtn);
                                if (otherDropdown) {
                                    otherDropdown.hide();
                                }
                            }
                        });

                        const dropdown = bootstrap.Dropdown.getInstance(this);
                        if (dropdown) {
                            // Use Popper.js strategy to handle overflow properly
                            dropdown._config.popperConfig = {
                                strategy: 'fixed',
                                modifiers: [{
                                    name: 'preventOverflow',
                                    options: {
                                        boundary: 'viewport',
                                    }
                                }]
                            };
                        }

                        // Check if button is visible in viewport on scroll
                        const scrollableParent = document.getElementById('boardMembers');
                        const currentBtn = this;

                        scrollListener = function() {
                            const btnRect = currentBtn.getBoundingClientRect();
                            const parentRect = scrollableParent.getBoundingClientRect();

                            // Check if button is out of visible area of parent container
                            const isOutOfView = (
                                btnRect.top < parentRect.top ||
                                btnRect.bottom > parentRect.bottom ||
                                btnRect.left < parentRect.left ||
                                btnRect.right > parentRect.right
                            );

                            if (isOutOfView) {
                                const dropdown = bootstrap.Dropdown.getInstance(currentBtn);
                                if (dropdown) {
                                    dropdown.hide();
                                }
                            }
                        };

                        if (scrollableParent) {
                            scrollableParent.addEventListener('scroll', scrollListener);
                        }
                    });

                    btn.addEventListener('hide.bs.dropdown', function(event) {
                        // Remove scroll listener when dropdown closes
                        const scrollableParent = document.getElementById('boardMembers');
                        if (scrollableParent && scrollListener) {
                            scrollableParent.removeEventListener('scroll', scrollListener);
                            scrollListener = null;
                        }
                    });
                });

                if (currentUserRole === 'admin') {
                    container.querySelectorAll('.set-role-btn:not(.disabled)').forEach(btn => {
                        btn.addEventListener('click', function(e) {
                            e.preventDefault();
                            e.stopPropagation();
                            const userId = parseInt(this.dataset.userId);
                            const newRole = this.dataset.role;

                            // Find the role dropdown button for this user
                            const roleBtn = container.querySelector(
                                `.role-dropdown-btn[data-user-id="${userId}"]`);
                            const roleText = roleBtn?.querySelector('.role-text');
                            const roleLoading = roleBtn?.querySelector('.role-loading');

                            // Close the dropdown immediately to prevent spam clicking
                            const dropdownInstance = bootstrap.Dropdown.getInstance(roleBtn);
                            if (dropdownInstance) {
                                dropdownInstance.hide();
                            }

                            // Show loading state
                            if (roleText && roleLoading) {
                                roleText.classList.add('d-none');
                                roleLoading.classList.remove('d-none');
                                roleBtn.disabled = true;
                            }

                            ajaxMemberAction('set_board_role', {
                                board_id: BOARD_ID,
                                user_id: userId,
                                role: newRole
                            }, function() {
                                boardMembers = boardMembers.map(member =>
                                    member.id === userId ? {
                                        ...member,
                                        role: newRole
                                    } : member
                                );
                                renderBoardMembers();
                                updateHiddenInput();

                                // Show success message
                                showAlert('success', 'Role anggota berhasil diperbarui!');
                            }, function() {
                                // Error callback - reset loading state
                                if (roleText && roleLoading) {
                                    roleText.classList.remove('d-none');
                                    roleLoading.classList.add('d-none');
                                    roleBtn.disabled = false;
                                }
                            });
                        });
                    });

                    container.querySelectorAll('.remove-board-member-btn:not(.disabled)').forEach(btn => {
                        btn.addEventListener('click', function(e) {
                            e.preventDefault();
                            e.stopPropagation();

                            // Only allow admins to remove members
                            if (currentUserRole !== 'admin') {
                                return;
                            }

                            const userId = parseInt(this.dataset.userId);
                            const member = boardMembers.find(m => m.id === userId);
                            if (member) {
                                openRemoveMemberModal(member);
                            }
                        });
                    });
                }
            }

            // Store the user to be added temporarily
            let pendingUserToAdd = null;
            let preventDropdownHide = false;

            // Open Add Member Confirmation Modal
            function openAddMemberModal(user) {
                // Only allow admins to add members
                if (currentUserRole !== 'admin') {
                    return;
                }

                pendingUserToAdd = user;

                // Populate modal with user data
                document.getElementById('addMemberAvatar').src = user.image;
                document.getElementById('addMemberAvatar').alt = user.name;
                document.getElementById('addMemberName').textContent = user.name;
                document.getElementById('addMemberEmail').textContent = user.email;
                document.getElementById('addMemberNameConfirm').textContent = user.name;

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

                // Prevent dropdown from closing when modal is shown
                preventDropdownHide = true;

                // Show modal
                const modal = new bootstrap.Modal(document.getElementById('addMemberModal'));
                modal.show();
            }

            // Prevent members dropdown from closing when modal is open
            const membersDropdownBtn = document.getElementById('membersDropdownBtn');
            if (membersDropdownBtn) {
                membersDropdownBtn.addEventListener('hide.bs.dropdown', function(e) {
                    if (preventDropdownHide) {
                        e.preventDefault();
                        e.stopPropagation();
                        return false;
                    }
                });
            }

            // Handle Add Member Confirmation
            document.getElementById('confirmAddMemberBtn').addEventListener('click', function() {
                if (!pendingUserToAdd) return;

                const confirmBtn = this;
                const btnText = confirmBtn.querySelector('.btn-text');
                const btnLoading = confirmBtn.querySelector('.btn-loading');

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

                // Add member via AJAX
                ajaxMemberAction('add_board_member', {
                    board_id: BOARD_ID,
                    user_id: pendingUserToAdd.id,
                    role: 'Member'
                }, function() {
                    // Add to boardMembers array
                    boardMembers.push({
                        ...pendingUserToAdd,
                        role: 'Member'
                    });

                    // Update UI
                    renderAvailableUsers();
                    renderBoardMembers();
                    updateHiddenInput();

                    // Close modal
                    const modal = bootstrap.Modal.getInstance(document.getElementById('addMemberModal'));
                    if (modal) {
                        modal.hide();
                    }

                    // Allow dropdown to close again after a short delay
                    setTimeout(() => {
                        preventDropdownHide = false;
                    }, 300);

                    // Reset button state
                    btnText.classList.remove('d-none');
                    btnLoading.classList.add('d-none');
                    confirmBtn.disabled = false;

                    // Clear pending user
                    pendingUserToAdd = null;

                    // Show success message
                    showAlert('success', 'Berhasil menambahkan anggota!');
                }, function() {
                    // Error callback - reset button state
                    btnText.classList.remove('d-none');
                    btnLoading.classList.add('d-none');
                    confirmBtn.disabled = false;

                    // Reset dropdown flag on error
                    preventDropdownHide = false;
                });
            });

            // Reset pending user when modal is closed
            document.getElementById('addMemberModal').addEventListener('hidden.bs.modal', function() {
                pendingUserToAdd = null;
                preventDropdownHide = false; // Always reset when modal closes
                const confirmBtn = document.getElementById('confirmAddMemberBtn');
                confirmBtn.querySelector('.btn-text').classList.remove('d-none');
                confirmBtn.querySelector('.btn-loading').classList.add('d-none');
                confirmBtn.disabled = false;
            });

            // Store the member to be removed temporarily
            let pendingUserToRemove = null;

            // Open Remove Member Modal
            function openRemoveMemberModal(member) {
                // Only allow admins to remove members
                if (currentUserRole !== 'admin') {
                    return;
                }

                pendingUserToRemove = member;

                // Populate modal with member data
                document.getElementById('removeMemberAvatar').src = member.image;
                document.getElementById('removeMemberAvatar').alt = member.name;
                document.getElementById('removeMemberName').textContent = member.name;
                document.getElementById('removeMemberEmail').textContent = member.email;
                document.getElementById('removeMemberNameConfirm').textContent = member.name;

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

                // Prevent dropdown from closing when modal is shown
                preventDropdownHide = true;

                // Show modal
                const modal = new bootstrap.Modal(document.getElementById('removeMemberModal'));
                modal.show();
            }

            // Handle Remove Member Confirmation
            document.getElementById('confirmRemoveMemberBtn').addEventListener('click', function() {
                if (!pendingUserToRemove) return;

                const confirmBtn = this;
                const btnText = confirmBtn.querySelector('.btn-text');
                const btnLoading = confirmBtn.querySelector('.btn-loading');

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

                // Remove member via AJAX
                ajaxMemberAction('remove_board_member', {
                    board_id: BOARD_ID,
                    user_id: pendingUserToRemove.id
                }, function() {
                    // Remove from boardMembers array
                    boardMembers = boardMembers.filter(member => member.id !== pendingUserToRemove.id);

                    // Update UI
                    renderAvailableUsers();
                    renderBoardMembers();
                    updateHiddenInput();

                    // Close modal
                    const modal = bootstrap.Modal.getInstance(document.getElementById('removeMemberModal'));
                    if (modal) {
                        modal.hide();
                    }

                    // Allow dropdown to close again after a short delay
                    setTimeout(() => {
                        preventDropdownHide = false;
                    }, 300);

                    // Reset button state
                    btnText.classList.remove('d-none');
                    btnLoading.classList.add('d-none');
                    confirmBtn.disabled = false;

                    // Clear pending user
                    pendingUserToRemove = null;

                    // Show success message
                    showAlert('success', 'Berhasil menghapus anggota!');
                }, function() {
                    // Error callback - reset button state
                    btnText.classList.remove('d-none');
                    btnLoading.classList.add('d-none');
                    confirmBtn.disabled = false;

                    // Reset dropdown flag on error
                    preventDropdownHide = false;
                });
            });

            // Reset pending user when modal is closed
            document.getElementById('removeMemberModal').addEventListener('hidden.bs.modal', function() {
                pendingUserToRemove = null;
                preventDropdownHide = false; // Always reset when modal closes
                const confirmBtn = document.getElementById('confirmRemoveMemberBtn');
                confirmBtn.querySelector('.btn-text').classList.remove('d-none');
                confirmBtn.querySelector('.btn-loading').classList.add('d-none');
                confirmBtn.disabled = false;
            });

            function updateHiddenInput() {
                const memberIds = boardMembers.map(member => member.id).join(',');
                const input = document.getElementById('selectedMemberIds');
                if (input) input.value = memberIds;
            }

            // Search/filter users with debounce and server-side search
            let searchTimeout;
            document.getElementById('memberSearch').addEventListener('input', function(e) {
                const searchTerm = e.target.value.toLowerCase();
                currentSearchTerm = searchTerm;

                // Clear previous timeout
                clearTimeout(searchTimeout);

                // Filter board members locally (already loaded)
                document.querySelectorAll('#boardMembers .selected-member-dropdown-item').forEach(item => {
                    const userName = item.querySelector('.user-info h6').textContent.toLowerCase();
                    item.style.display = userName.includes(searchTerm) ? 'flex' : 'none';
                });

                // Debounce search for available users (wait 300ms after user stops typing)
                searchTimeout = setTimeout(() => {
                    // Reset and load users with search term
                    currentPage = 1;
                    hasMoreUsers = true;
                    availableUsers = [];
                    loadAvailableUsers(true);
                }, 300);
            });

            // Initialize on dropdown show
            const membersDropdown = document.getElementById('membersDropdownBtn');
            if (membersDropdown) {
                membersDropdown.addEventListener('shown.bs.dropdown', function() {
                    // Load users when dropdown is shown
                    currentPage = 1;
                    hasMoreUsers = true;
                    currentSearchTerm = '';
                    availableUsers = [];
                    loadAvailableUsers(true);
                    renderBoardMembers();
                });
                const dropdownMenu = document.querySelector('#membersDropdownBtn + .dropdown-menu');
                if (dropdownMenu) {
                    dropdownMenu.addEventListener('click', function(e) {
                        e.stopPropagation();
                    });
                }
            }
        }

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

            // Get export elements
            const exportBtn = document.getElementById('exportBoardBtn');
            const exportFormatRadios = document.querySelectorAll('input[name="exportFormat"]');
            const exportDateFrom = document.getElementById('exportDateFrom');
            const exportDateTo = document.getElementById('exportDateTo');

            // Handle export button click
            if (exportBtn) {
                exportBtn.addEventListener('click', function() {
                    // Get selected format
                    let selectedFormat = 'excel';
                    exportFormatRadios.forEach(radio => {
                        if (radio.checked) {
                            selectedFormat = radio.value;
                        }
                    });

                    // Validate that a format is selected
                    if (!selectedFormat) {
                        showAlert('warning', 'Silahkan pilih format ekspor.');
                        return;
                    }

                    // Gather export options
                    const exportOptions = {
                        format: selectedFormat,
                        board_id: BOARD_ID,
                        date_from: exportDateFrom ? exportDateFrom.value : '',
                        date_to: exportDateTo ? exportDateTo.value : ''
                    };

                    // Validate date range
                    if (exportOptions.date_from && exportOptions.date_to) {
                        const fromDate = new Date(exportOptions.date_from);
                        const toDate = new Date(exportOptions.date_to);

                        if (fromDate > toDate) {
                            showAlert('warning', 'Tanggal mulai harus sebelum tanggal akhir.');
                            return;
                        }
                    }

                    // Disable button and show loading
                    exportBtn.disabled = true;
                    const originalText = exportBtn.innerHTML;
                    exportBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Mengekspor...';

                    const exportUrl = "{{ url('boards/export') }}";

                    fetch(exportUrl, {
                            method: 'POST',
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest',
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': CSRF_TOKEN
                            },
                            body: JSON.stringify(exportOptions)
                        })
                        .then(response => {
                            if (!response.ok) throw new Error('Export failed');

                            const contentDisposition = response.headers.get('Content-Disposition');
                            const fileExtension = selectedFormat === 'pdf' ? 'pdf' : 'xlsx';
                            let filename = `board_${BOARD_ID}_export.${fileExtension}`;

                            if (contentDisposition) {
                                const filenameMatch = contentDisposition.match(
                                    /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
                                if (filenameMatch?.[1]) {
                                    filename = filenameMatch[1].replace(/['"]/g, '');
                                }
                            }

                            return response.blob().then(blob => ({
                                blob,
                                filename
                            }));
                        })
                        .then(({
                            blob,
                            filename
                        }) => {
                            const url = window.URL.createObjectURL(blob);
                            const a = document.createElement('a');
                            a.style.display = 'none';
                            a.href = url;
                            a.download = filename;
                            document.body.appendChild(a);
                            a.click();
                            window.URL.revokeObjectURL(url);
                            document.body.removeChild(a);

                            const formatName = selectedFormat === 'excel' ? 'Excel' : 'PDF';
                            showAlert('success', `Board berhasil di ekspor sebagai ${formatName}!`);

                            const dropdownToggle = document.getElementById('exportDropdownBtn');
                            if (dropdownToggle) {
                                const bsDropdown = bootstrap.Dropdown.getInstance(dropdownToggle);
                                if (bsDropdown) bsDropdown.hide();
                            }
                        })
                        .catch(error => {
                            console.error('Export error:', error);
                            showAlert('danger', 'Gagal mengekspor board. Silakan coba lagi.');
                        })
                        .finally(() => {
                            exportBtn.disabled = false;
                            exportBtn.innerHTML = originalText;
                        });
                });
            }

            // Add visual feedback for date range selection
            if (exportDateFrom && exportDateTo) {
                const updateDateRangeStyle = function() {
                    const fromValue = exportDateFrom.value;
                    const toValue = exportDateTo.value;

                    if (fromValue || toValue) {
                        exportDateFrom.style.borderColor = '#1171ef';
                        exportDateTo.style.borderColor = '#1171ef';
                    } else {
                        exportDateFrom.style.borderColor = '';
                        exportDateTo.style.borderColor = '';
                    }
                };

                exportDateFrom.addEventListener('change', updateDateRangeStyle);
                exportDateTo.addEventListener('change', updateDateRangeStyle);
            }
        }

        // Grab to scroll for kanban columns
        document.addEventListener('DOMContentLoaded', function() {
            const board = document.querySelector('.board');
            let isDown = false;
            let startX;
            let scrollLeft;
            let isSortableDragging = false;

            document.addEventListener('sortable:start', function() {
                isSortableDragging = true;
            });
            document.addEventListener('sortable:end', function() {
                isSortableDragging = false;
            });

            board.addEventListener('mousedown', (e) => {
                if (isSortableDragging) return;
                // Prevent scroll-drag if clicking on a kanban-column or its children
                let node = e.target;
                let isColumnOrChild = false;
                while (node && node !== board) {
                    if (node.classList && node.classList.contains('kanban-column')) {
                        isColumnOrChild = true;
                        break;
                    }
                    node = node.parentNode;
                }
                if (isColumnOrChild) return;
                isDown = true;
                board.classList.add('dragging');
                startX = e.pageX - board.offsetLeft;
                scrollLeft = board.scrollLeft;
            });
            board.addEventListener('mouseleave', () => {
                isDown = false;
                board.classList.remove('dragging');
            });
            board.addEventListener('mouseup', () => {
                isDown = false;
                board.classList.remove('dragging');
            });
            board.addEventListener('mousemove', (e) => {
                if (!isDown || isSortableDragging) return;
                e.preventDefault();
                const x = e.pageX - board.offsetLeft;
                const walk = (x - startX) * 1.5; // scroll speed
                board.scrollLeft = scrollLeft - walk;
            });
        });

        // Initialize everything on DOM load
        document.addEventListener('DOMContentLoaded', function() {
            initializeInlineEditForColumns();
            initializeSortable();
            archiveDropdown();
            filterDropdown();
            memberDropdown();
            exportDropdown();

            // Check if there's a card parameter in URL and auto-open modal
            autoOpenCardModal();

            // Initialize overflow check
            setTimeout(checkAndToggleOverflow, 100);
        });

        // Check overflow on window resize
        window.addEventListener('resize', function() {
            checkAndToggleOverflow();
        });

        // Function to auto-open card modal if card parameter exists in URL
        function autoOpenCardModal() {
            const urlParams = new URLSearchParams(window.location.search);
            // Check both 'card' and 'auto_open_card' parameters
            const cardId = urlParams.get('card') || urlParams.get('auto_open_card');

            if (cardId) {
                // Wait a bit for the page to fully load, then open the modal
                setTimeout(() => {
                    if (typeof openViewCardModal === 'function') {
                        openViewCardModal(cardId);

                        // Remove the card parameter from URL after opening modal
                        const newUrl = new URL(window.location);
                        newUrl.searchParams.delete('card');
                        newUrl.searchParams.delete('auto_open_card');
                        window.history.replaceState({}, '', newUrl);
                    }
                }, 500);
            }
        }

        // Fix card action dropdown positioning to prevent cut-off
        document.querySelectorAll('.card-action-dropdown').forEach(dropdown => {
            const btn = dropdown.querySelector('.card-action-btn');

            if (btn) {
                btn.addEventListener('show.bs.dropdown', function() {
                    const dropdownMenu = this.nextElementSibling;

                    // Use fixed strategy with better boundary detection
                    const dropdownInstance = bootstrap.Dropdown.getInstance(this) || new bootstrap.Dropdown(
                        this, {
                            boundary: 'viewport',
                            popperConfig: {
                                strategy: 'fixed',
                                modifiers: [{
                                        name: 'preventOverflow',
                                        options: {
                                            boundary: 'viewport',
                                            altAxis: true,
                                            padding: 8
                                        }
                                    },
                                    {
                                        name: 'flip',
                                        options: {
                                            fallbackPlacements: ['bottom', 'top', 'left', 'right'],
                                            boundary: 'viewport'
                                        }
                                    }
                                ]
                            }
                        });

                    // Add high z-index to ensure menu is on top
                    if (dropdownMenu) {
                        dropdownMenu.style.zIndex = '99999';
                    }
                });
            }
        });
    </script>
@endpush