@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">

        {{-- Recently Viewed Section --}}
        @if (isset($recently_viewed) && $recently_viewed->count() > 0)
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header pb-0">
                            <h6>Baru Dilihat</h6>
                        </div>
                        <div class="card-body">
                            <div class="row" id="recently-viewed">
                                @foreach ($recently_viewed as $board)
                                    @php
                                        $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;';
                                        } elseif ($isHexColor) {
                                            $backgroundStyle = 'background-color: ' . $board->image_path . ';';
                                        } else {
                                            $backgroundStyle = 'background-color: #1e8c94;'; // fallback to primary color
                                        }
                                    @endphp
                                    <div class="col-xl-3 col-md-6 mb-4">
                                        <div class="card board-card h-100" data-project-id="{{ $board->id }}"
                                            onclick="openBoard({{ $board->id }})">
                                            <div class="card-header board-header position-relative"
                                                style="{{ $backgroundStyle }}">
                                                <div class="board-pattern"></div>
                                            </div>
                                            <div class="card-body d-flex flex-column">
                                                <h6 class="mb-0 board-title">{{ $board->title }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- My Boards Section --}}
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header pb-0">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6>Boards Saya</h6>
                            <span
                                class="badge badge-sm bg-gradient-secondary">{{ isset($my_boards) ? $my_boards->count() : 0 }}
                                boards</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row" id="my-boards">
                            @if (isset($my_boards))
                                @foreach ($my_boards as $board)
                                    @php
                                        $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;';
                                        } elseif ($isHexColor) {
                                            $backgroundStyle = 'background-color: ' . $board->image_path . ';';
                                        } else {
                                            $backgroundStyle = 'background-color: #1e8c94;'; // fallback to primary color
                                        }
                                    @endphp
                                    <div class="col-xl-3 col-md-6 mb-4">
                                        <div class="card board-card h-100" data-project-id="{{ $board->id }}"
                                            onclick="openBoard({{ $board->id }})">
                                            <div class="card-header board-header position-relative"
                                                style="{{ $backgroundStyle }}">
                                                <div class="board-pattern"></div>
                                                <div class="board-dropdown position-absolute"
                                                    style="top: 10px; right: 10px;">
                                                    <button type="button" class="btn board-options-btn"
                                                        id="boardOptions{{ $board->id }}" data-bs-toggle="dropdown"
                                                        aria-expanded="false" onclick="event.stopPropagation()"
                                                        title="Board Options">
                                                        <i class="fas fa-ellipsis-h"></i>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-end"
                                                        aria-labelledby="boardOptions{{ $board->id }}">
                                                        <li>
                                                            <a class="dropdown-item"
                                                                onclick="event.stopPropagation(); editBoard({{ $board->id }}, '{{ $board->title }}', '{{ $board->image_path }}')">
                                                                <i class="fas fa-edit me-2"></i>
                                                                Ubah board ini
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a class="dropdown-item"
                                                                onclick="event.stopPropagation(); archiveBoard({{ $board->id }}, '{{ $board->title }}')">
                                                                <i class="fas fa-archive me-2"></i>
                                                                Arsipkan board ini
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="card-body d-flex flex-column">
                                                <h6 class="mb-0 board-title">{{ $board->title }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif

                            {{-- Create New Board Card --}}
                            <div class="col-xl-3 col-md-6 mb-4">
                                <div class="card create-board-card h-100" onclick="openCreateBoardModal()">
                                    <div
                                        class="card-body d-flex flex-column justify-content-center align-items-center text-center">
                                        <div
                                            class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md mb-3">
                                            <i class="fas fa-plus text-lg opacity-10" aria-hidden="true"></i>
                                        </div>
                                        <h6 class="text-primary mb-2">Buat Board Baru</h6>
                                        <p class="text-sm text-muted mb-0">Mulai kelola proyek Anda</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Shared Boards Section --}}
        @if (isset($shared_boards) && $shared_boards->count() > 0)
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header pb-0">
                            <div class="d-flex justify-content-between align-items-center">
                                <h6>Dibagikan dengan Anda</h6>
                                <span class="badge badge-sm bg-gradient-secondary">{{ $shared_boards->count() }}
                                    boards</span>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row" id="shared-boards">
                                @php
                                    // Ambil user_id dari session (bukan auth()->id())
                                    $currentUsername = session('username');
                                    $currentUserId = null;
                                    if ($currentUsername) {
                                        $u = \App\Models\User::find($currentUsername);
                                        $currentUserId = $u ? $u->id : null;
                                    }

                                    $boardIds = isset($shared_boards) ? $shared_boards->pluck('id') : collect();

                                    // Map pivot: [board_id => role_in_board]
                                    $boardRoles = \DB::table('board_user')
                                        ->where('user_id', $currentUserId)
                                        ->whereIn('board_id', $boardIds)
                                        ->pluck('role_in_board', 'board_id');
                                @endphp
                                @foreach ($shared_boards as $board)
                                    @php
                                        $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;';
                                        } elseif ($isHexColor) {
                                            $backgroundStyle = 'background-color: ' . $board->image_path . ';';
                                        } else {
                                            $backgroundStyle = 'background-color: #1e8c94;'; // fallback to primary color
                                        }

                                        // Tentukan role user pada board ini
                                        $roleInBoard = null;
                                        if (isset($board->pivot) && isset($board->pivot->role_in_board)) {
                                            $roleInBoard = $board->pivot->role_in_board;
                                        } else {
                                            $roleInBoard = $boardRoles->get($board->id);
                                        }
                                        $isAdminMember =
                                            is_string($roleInBoard) && strtolower(trim($roleInBoard)) === 'admin';
                                    @endphp
                                    <div class="col-xl-3 col-md-6 mb-4">
                                        <div class="card board-card h-100" data-project-id="{{ $board->id }}"
                                            onclick="openBoard({{ $board->id }})">
                                            <div class="card-header board-header position-relative"
                                                style="{{ $backgroundStyle }}">
                                                <div class="board-pattern"></div>
                                                <div class="position-absolute" style="top: 10px; right: 10px;">
                                                    <div class="d-flex">
                                                        <div class="shared-board-label backdrop-blur">
                                                            <i class="fas fa-share-alt"></i>
                                                            <span>Dibagikan</span>
                                                        </div>
                                                        @if ($isAdminMember)
                                                            <div class="shared-board-label backdrop-blur ms-1 admin-board-label"
                                                                title="Role: {{ $roleInBoard }}">
                                                                <i class="fas fa-user-shield"></i>
                                                                <span>Admin</span>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card-body d-flex flex-column">
                                                <h6 class="mb-0 board-title">{{ $board->title }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

    </div>

    {{-- Create Board Modal --}}
    <div class="modal fade" id="createBoardModal" tabindex="-1" aria-labelledby="createBoardModalLabel" 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="createBoardModalLabel">
                        Title
                    </h5>
                    <button type="button" class="btn-close text-white position-absolute" style="right: 1rem;"
                        data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="createBoardForm">
                        <input type="hidden" id="boardId" name="board_id" value="">
                        <div class="mb-4">
                            <label class="fw-bold mb-2">Judul Board <span class="text-danger">*</span></label>
                            <input type="text" id="boardTitle" name="title" class="form-control"
                                placeholder="Masukkan judul board di sini..." required>
                        </div>
                        <div class="mb-4">
                            <label class="fw-bold mb-2">Latar Belakang</label>

                            {{-- Pick a Color Section --}}
                            <div class="mb-3">
                                <h6 class="text-sm fw-semibold text-muted ms-1 mb-2">Pilih warna</h6>
                                <div class="row g-2" id="backgroundSelector">
                                    @php
                                        $customColors = [
                                            ['color' => '#1e8c94', 'name' => 'Primary'],
                                            ['color' => '#758A93', 'name' => 'Secondary'],
                                            ['color' => '#44444E', 'name' => 'Dark'],
                                            ['color' => '#FFE8A3', 'name' => 'Light Yellow'],
                                            ['color' => '#A3E0FF', 'name' => 'Light Blue'],
                                            ['color' => '#FFB6B9', 'name' => 'Light Pink'],
                                        ];
                                    @endphp
                                    @foreach ($customColors as $bgColor)
                                        <div class="col-4">
                                            <button type="button"
                                                class="btn shadow-none border-0 p-2 background-option w-100 {{ $loop->first ? 'selected' : '' }}"
                                                style="height: 56px; position: relative; border-radius: 8px; background-color: {{ $bgColor['color'] }};"
                                                data-bg="{{ $bgColor['color'] }}" data-type="color"
                                                title="{{ $bgColor['name'] }}">
                                                <i class="fas fa-check background-check"
                                                    style="display: {{ $loop->first ? 'block' : 'none' }};"></i>
                                            </button>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            {{-- Choose Your Own Image Section --}}
                            <div>
                                <h6 class="text-sm fw-semibold text-muted ms-1 mb-2">Atau gunakan gambar Anda sendiri</h6>
                                <div class="custom-image-upload-container">
                                    <input type="file" id="customImageInput" name="custom_image" accept="image/*"
                                        class="d-none">
                                    <button type="button" class="btn btn-outline-secondary w-100 custom-image-upload-btn"
                                        id="customImageUploadBtn"
                                        onclick="document.getElementById('customImageInput').click()">
                                        <div class="upload-content">
                                            <i class="fas fa-cloud-upload-alt mb-2" style="font-size: 28px;"></i>
                                            <div class="fw-semibold">Unggah Gambar</div>
                                            <small class="text-muted">Klik untuk memilih atau tarik dan letakkan</small>
                                        </div>
                                    </button>
                                    <div id="imagePreviewContainer" class="mt-2" style="display: none;">
                                        <div class="position-relative d-inline-block">
                                            <img id="imagePreview" src="" alt="Preview" class="img-thumbnail"
                                                style="max-height: 120px; border-radius: 8px;">
                                            <button type="button" class="btn btn-sm btn-danger position-absolute"
                                                id="removeImageBtn"
                                                style="top: -8px; right: -8px; width: 24px; height: 24px; padding: 0; border-radius: 50%;"
                                                title="Remove image">
                                                <i class="fas fa-times" style="font-size: 12px;"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <input type="hidden" id="selectedBackground" name="background" value="#1e8c94">
                            <input type="hidden" id="backgroundType" name="background_type" value="color">
                        </div>
                        <div class="mb-4">
                            <div class="d-flex justify-content-between align-items-center">
                                <label class="fw-bold mb-0">Anggota Board</label>
                                <div class="member-dropdown">
                                    <button type="button" class="btn btn-outline-primary btn-sm mt-3 dropdown-toggle"
                                        id="membersDropdownBtn" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="fas fa-user-plus me-1"></i> Tambah
                                    </button>
                                    <div class="dropdown-menu py-0" aria-labelledby="membersDropdownBtn"
                                        style="width: 350px;" data-bs-auto-close="outside">
                                        <div class="dropdown-header text-center">
                                            <h5 class="dropdown-title fw-bold mt-2">
                                                Anggota
                                            </h5>
                                        </div>
                                        <div class="dropdown-content p-3">
                                            <div class="mb-3">
                                                <input type="text" class="form-control form-control" id="memberSearch"
                                                    placeholder="Search members">
                                            </div>
                                            <div class="mb-3">
                                                <h6 class="dropdown-label text-dark mb-2">Anggota yang dipilih</h6>
                                                <div id="boardMembers" style="max-height: 150px; overflow-y: auto;">
                                                    <p class="dropdown-label text-muted mb-0 text-center py-2">Tidak ada
                                                        anggota
                                                    </p>
                                                </div>
                                            </div>
                                            <div>
                                                <h6 class="dropdown-label text-dark mb-2">Pengguna yang tersedia</h6>
                                                <div id="availableUsers" style="max-height: 200px; overflow-y: auto;">
                                                    @if (isset($available_users) && count($available_users) > 0)
                                                        @foreach ($available_users as $user)
                                                            <div class="user-item" data-user-id="{{ $user['id'] }}">
                                                                <img src="{{ $user['image'] }}"
                                                                    alt="{{ $user['name'] }}" class="user-avatar">
                                                                <div class="user-info grow">
                                                                    <h6>{{ $user['name'] }}</h6>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    @else
                                                        <p class="dropdown-label text-muted text-center py-2">Tidak ada
                                                            pengguna yang tersedia</p>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="content-container">
                                <div id="selectedMembersDisplay">
                                    <div class="text-center text-muted py-3">
                                        <p class="mb-0">Tidak ada anggota yang dipilih</p>
                                        <small>Klik "Tambah" untuk menambahkan anggota tim</small>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" id="selectedMemberIds" name="member_ids" value="">
                        </div>
                    </form>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn bg-primary text-white w-100 fw-bold" id="createBoardSubmit">
                        <i class="fas fa-check me-1"></i> <span id="submitBtnText">Submit</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Archive Board Confirmation Modal --}}
    <div class="modal fade" id="archiveModal" tabindex="-1" aria-labelledby="archiveModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger">
                    <h5 class="modal-title fw-bold text-white" id="archiveModalLabel">Arsipkan Board</h5>
                    <button type="button" class="btn-close text-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-3">Apakah Anda yakin ingin mengarsipkan <strong id="archiveBoardTitle">board
                            ini</strong>?
                    </p>
                    <div class="info-box d-flex align-items-start p-3 rounded"
                        style="background-color: #e3f2fd; border-left: 4px solid #11cdef;">
                        <i class="fas fa-info-circle me-2 mt-1 text-info"></i>
                        <small>Board ini akan dipindahkan ke Menu Archive dan tidak lagi muncul di Board aktif Anda. Cek
                            kembali apakah ada kartu yang masih aktif. </small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-danger" id="confirmArchive">
                        <i class="fas fa-archive me-1"></i> Arsipkan Board
                    </button>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('css')
    <style>
        /* Board Cards */
        .board-card {
            cursor: pointer;
            transition: all 0.2s ease;
            border: 1.5px solid #e0e0e0;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: hidden;
        }

        .board-card:hover {
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        }

        .board-card .board-header {
            min-height: 120px;
            position: relative;
            border-radius: 8px 8px 0 0;
            padding: 16px 20px;
            margin: 0;
        }

        .board-card .card-header.board-header {
            padding: 16px 20px;
            margin-bottom: 0;
            background-color: transparent;
            border-radius: 8px 8px 0 0;
        }

        .board-card.card {
            border-radius: 8px;
            overflow: hidden;
        }

        .board-card .card-body,
        .create-board-card .card-body {
            padding: 16px 20px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            margin: 0;
            border-radius: 0 0 8px 8px;
        }

        .board-card .card-body h6 {
            font-weight: 600;
            margin-bottom: 16px;
            line-height: 1.4;
            word-wrap: break-word;
        }

        .board-title {
            flex-grow: 1;
            display: flex;
            align-items: center;
        }

        /* Create New Board Card */
        .create-board-card {
            cursor: pointer;
            transition: all 0.2s ease;
            border: 2px dashed #dee2e6;
            background-color: #ffffff;
            border-radius: 8px;
        }

        .create-board-card:hover {
            background-color: #f8f9fa;
            border-color: #6c757d;
        }

        /* Board Options Button */
        .board-options-btn {
            border: none;
            background: rgba(0, 0, 0, 0.3);
            color: rgba(255, 255, 255, 0.9);
            padding: 5px 9px;
            border-radius: 8px;
            backdrop-filter: blur(5px);
            box-shadow: none;
        }

        .board-options-btn:hover,
        .board-options-btn:focus {
            background: rgba(0, 0, 0, 0.2);
            color: #ffffff;
            box-shadow: none;
        }

        .board-options-btn i {
            font-size: 14px;
            font-weight: 600;
        }

        /* Shared Board Labels */
        .shared-board-label {
            border: none;
            background: rgba(0, 0, 0, 0.3);
            color: rgba(255, 255, 255, 0.9);
            padding: 6px 12px;
            border-radius: 20px;
            backdrop-filter: blur(5px);
            display: flex;
            align-items: center;
            font-size: 11px;
            font-weight: bold;
        }

        .shared-board-label i {
            font-size: 12px;
            margin-right: 4px;
        }

        .admin-board-label {
            background: rgba(0, 0, 0, 0.3);
        }

        .backdrop-blur {
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        /* Dropdown Styles */
        #createBoardModal .dropdown-toggle {
            width: 112px;
        }

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

        #membersDropdownBtn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .dropdown-menu {
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            padding: 8px 0;
            min-width: 180px;
            z-index: 1050;
        }

        .modal .dropdown-menu {
            z-index: 1060;
        }

        .dropdown-item {
            padding: 8px 16px;
            font-size: 14px;
            color: #495057;
            display: flex;
            align-items: center;
        }

        .dropdown-item:hover {
            background-color: #f8f9fa;
        }

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

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

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

        /* Modal - Background Selection */
        .background-option {
            min-height: 80px;
            min-width: 120px;
            position: relative;
            cursor: pointer;
        }

        .background-check {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 14px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
            font-weight: bold;
        }

        /* Modal - Custom Image Upload */
        .custom-image-upload-container {
            width: 100%;
        }

        .custom-image-upload-btn {
            min-height: 140px;
            border: 2px dashed #dee2e6;
            border-radius: 8px;
            background-color: #ffffff;
            transition: all 0.2s ease;
            cursor: pointer;
            padding: 20px;
        }

        .custom-image-upload-btn:hover {
            background-color: #f8f9fa;
            border-color: #6c757d;
        }

        .custom-image-upload-btn.has-image {
            border-style: solid;
            border-color: #5e72e4;
            background-color: #f0f2ff;
        }

        .custom-image-upload-btn .upload-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #6c757d;
        }

        .custom-image-upload-btn:hover .upload-content {
            color: #495057;
        }

        .custom-image-upload-btn .upload-content i {
            color: #5e72e4;
            opacity: 0.7;
        }

        .custom-image-upload-btn:hover .upload-content i {
            opacity: 1;
        }

        #imagePreviewContainer .img-thumbnail {
            border: 2px solid #e9ecef;
            padding: 4px;
            background-color: #fff;
        }

        /* Modal - Member Selection */
        .user-item {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            cursor: pointer;
            border-radius: 6px;
            transition: background-color 0.2s ease;
        }

        .user-item:hover {
            background-color: #f8f9fa;
        }

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

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

        .user-info h6 {
            margin: 0;
            font-size: 14px;
            font-weight: 600;
            color: #333;
        }

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

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

        .selected-member-dropdown-item:hover {
            background-color: #f8f9fa;
        }

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

        /* Archive Modal */
        #archiveModal .modal-header {
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }

        #archiveModal .modal-body {
            padding: 32px 24px;
        }

        #archiveModal .modal-footer {
            border-top: 1px solid #dee2e6;
            padding: 16px 24px;
        }
    </style>
@endpush

@push('js')
    <script>
        // Global variables
        let selectedMembers = [];

        // Utility functions
        const getElement = (id) => document.getElementById(id);
        const getElements = (selector) => document.querySelectorAll(selector);

        // Search functionality
        const searchInput = getElement('searchInput');
        if (searchInput) {
            searchInput.addEventListener('input', (e) => {
                const searchTerm = e.target.value.toLowerCase();
                getElements('.board-card').forEach(card => {
                    const title = card.querySelector('h6');
                    if (title) {
                        card.style.display = title.textContent.toLowerCase().includes(searchTerm) ? '' :
                            'none';
                    }
                });
            });
        }

        // Navigation
        function openBoard(projectId) {
            window.location.href = `{{ url('boards/show') }}/${projectId}`;
        }

        // Archive board
        function archiveBoard(boardId, boardTitle) {
            const dropdownBtn = getElement(`boardOptions${boardId}`);
            if (dropdownBtn) {
                bootstrap.Dropdown.getOrCreateInstance(dropdownBtn).hide();
            }

            const allBoardCards = getElements(`[data-project-id="${boardId}"]`);
            const confirmBtn = getElement('confirmArchive');

            getElement('archiveBoardTitle').textContent = boardTitle;
            confirmBtn.setAttribute('data-board-id', boardId);
            confirmBtn.setAttribute('data-board-title', boardTitle);
            confirmBtn.allBoardCardElements = Array.from(allBoardCards).map(card => card.closest('.col-xl-3'));

            new bootstrap.Modal(getElement('archiveModal')).show();
        }

        // Reset custom image
        function resetCustomImage() {
            const elements = {
                input: getElement('customImageInput'),
                container: getElement('imagePreviewContainer'),
                preview: getElement('imagePreview'),
                button: getElement('customImageUploadBtn')
            };

            if (elements.input) elements.input.value = '';
            if (elements.container) elements.container.style.display = 'none';
            if (elements.preview) elements.preview.src = '';
            if (elements.button) elements.button.classList.remove('has-image');
        }

        // Update hidden input with selected member IDs
        function updateHiddenInput() {
            const memberIdsInput = getElement('selectedMemberIds');
            if (memberIdsInput) {
                // Send "0" when no members to explicitly signal removal, otherwise comma-separated IDs
                // Filter out admins so their IDs are not sent and thus not downgraded to ordinary members or duplicated
                const idsToSend = selectedMembers.filter(m => m.role !== 'admin' && !m.is_owner);
                const memberIds = idsToSend.length > 0 ?
                    idsToSend.map(member => member.id).join(',') :
                    '0';
                memberIdsInput.value = memberIds;
            }
        }

        // Render selected members display
        function renderSelectedMembers() {
            const container = getElement('selectedMembersDisplay');
            const boardMembersContainer = getElement('boardMembers');

            if (!container || !boardMembersContainer) return;

            if (selectedMembers.length === 0) {
                container.innerHTML = `
          <div class="text-center text-muted py-3">
            <p class="mb-0">Tidak ada anggota yang dipilih</p>
            <small>Klik "Tambah" untuk menambahkan anggota tim</small>
          </div>
        `;
                boardMembersContainer.innerHTML =
                    '<p class="dropdown-label text-muted mb-0 text-center py-2">Tidak ada anggota</p>';
                return;
            }

            container.innerHTML = selectedMembers.map(member => `
        <div class="selected-member-item" data-user-id="${member.id}">
          <img src="${member.image}" alt="${member.name}" class="selected-member-avatar">
        </div>
      `).join('');

            boardMembersContainer.innerHTML = selectedMembers.map(member => `
        <div class="selected-member-dropdown-item" data-user-id="${member.id}">
          <img src="${member.image}" alt="${member.name}" class="user-avatar">
          <div class="user-info flex-grow-1">
            <h6>${member.name}${member.is_owner ? ' <span class="badge bg-primary" style="font-size: 10px;">Owner</span>' : (member.role === 'admin' ? ' <span class="badge bg-info" style="font-size: 10px;">Admin</span>' : '')}</h6>
          </div>
          ${(member.is_owner || member.role === 'admin') ? '' : `<button type="button" class="remove-member-btn" data-user-id="${member.id}">&times;</button>`}
        </div>
      `).join('');

            boardMembersContainer.querySelectorAll('.remove-member-btn').forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const userIdToRemove = parseInt(this.dataset.userId);
                    selectedMembers = selectedMembers.filter(member => member.id !== userIdToRemove);
                    renderSelectedMembers();
                    updateHiddenInput();
                });
            });
        }

        // Reset form
        function resetForm() {
            const form = getElement('createBoardForm');
            if (form) form.reset();

            getElements('.background-option').forEach((btn, index) => {
                btn.classList.toggle('selected', index === 0);
                const checkmark = btn.querySelector('.background-check');
                if (checkmark) checkmark.style.display = index === 0 ? 'block' : 'none';
            });

            const selectedBg = getElement('selectedBackground');
            const bgType = getElement('backgroundType');
            if (selectedBg) selectedBg.value = '#1e8c94';
            if (bgType) bgType.value = 'color';

            resetCustomImage();

            selectedMembers = [];
            renderSelectedMembers();
            updateHiddenInput();

            const memberSearch = getElement('memberSearch');
            if (memberSearch) memberSearch.value = '';
        }

        // Open create board modal
        function openCreateBoardModal() {
            resetForm();
            getElement('createBoardModalLabel').textContent = 'Buat Board Baru';
            getElement('submitBtnText').textContent = 'Buat Board';
            getElement('boardId').value = '';
            new bootstrap.Modal(getElement('createBoardModal')).show();
        }

        // Edit board function
        function editBoard(boardId, boardTitle, imagePath) {
            const dropdownBtn = getElement(`boardOptions${boardId}`);
            if (dropdownBtn) {
                bootstrap.Dropdown.getOrCreateInstance(dropdownBtn).hide();
            }

            resetForm();
            selectedMembers = [];

            // Update modal elements
            const elements = {
                modalLabel: getElement('createBoardModalLabel'),
                submitBtnText: getElement('submitBtnText'),
                boardIdInput: getElement('boardId'),
                boardTitleInput: getElement('boardTitle'),
                bgTypeInput: getElement('backgroundType'),
                selectedBgInput: getElement('selectedBackground'),
                container: getElement('selectedMembersDisplay')
            };

            if (elements.modalLabel) elements.modalLabel.textContent = 'Ubah Board';
            if (elements.submitBtnText) elements.submitBtnText.textContent = 'Perbarui Board';
            if (elements.boardIdInput) elements.boardIdInput.value = boardId;

            // Set board title after form reset completes
            if (elements.boardTitleInput) {
                setTimeout(() => {
                    elements.boardTitleInput.value = boardTitle;
                    elements.boardTitleInput.focus();
                    elements.boardTitleInput.blur();
                }, 0);
            }

            // Handle background selection
            setBackgroundSelection(imagePath, elements.bgTypeInput, elements.selectedBgInput);

            // Show loading state
            if (elements.container) {
                elements.container.innerHTML = `
          <div class="text-center text-muted py-3">
            <i class="fas fa-spinner fa-spin mb-2" style="font-size: 14px;"></i>
            <p class="dropdown-label mb-0">Memuat anggota...</p>
          </div>
        `;
            }

            // Fetch and load board members
            loadBoardMembers(boardId, elements.container);

            new bootstrap.Modal(getElement('createBoardModal')).show();
        }

        // Helper: Set background selection
        function setBackgroundSelection(imagePath, bgTypeInput, selectedBgInput) {
            const DEFAULT_BG = '#1e8c94';

            // Reset all background options
            getElements('.background-option').forEach(btn => {
                btn.classList.remove('selected');
                const checkmark = btn.querySelector('.background-check');
                if (checkmark) checkmark.style.display = 'none';
            });

            if (!imagePath) {
                // Use default background
                if (bgTypeInput) bgTypeInput.value = 'color';
                if (selectedBgInput) selectedBgInput.value = DEFAULT_BG;
                selectBackgroundOption(getElements('.background-option')[0]);
                return;
            }

            const isCustomImage = imagePath.includes('/') || imagePath.includes('\\');
            const isHexColor = imagePath.startsWith('#');

            if (isCustomImage) {
                if (bgTypeInput) bgTypeInput.value = 'image';
                if (selectedBgInput) selectedBgInput.value = imagePath;
            } else if (isHexColor) {
                if (bgTypeInput) bgTypeInput.value = 'color';
                if (selectedBgInput) selectedBgInput.value = imagePath;

                // Find and select matching color option
                getElements('.background-option').forEach(btn => {
                    if (btn.dataset.bg === imagePath) {
                        selectBackgroundOption(btn);
                    }
                });
            }
        }

        // Helper: Select background option visually
        function selectBackgroundOption(option) {
            if (!option) return;
            option.classList.add('selected');
            const checkmark = option.querySelector('.background-check');
            if (checkmark) checkmark.style.display = 'block';
        }

        // Helper: Load board members via AJAX
        const memberCache = new Map();
        const CACHE_DURATION = 60000; // 1 minute cache

        function loadBoardMembers(boardId, container) {
            // Check cache first
            const cacheKey = `board_${boardId}`;
            const cached = memberCache.get(cacheKey);

            if (cached && Date.now() - cached.timestamp < CACHE_DURATION) {
                selectedMembers = cached.members;
                renderSelectedMembers();
                updateHiddenInput();
                return Promise.resolve(cached.members);
            }

            // Show loading state
            if (container) {
                container.innerHTML = `
          <div class="text-center text-muted py-3">
            <i class="fas fa-spinner fa-spin mb-2" style="font-size: 14px;"></i>
            <p class="dropdown-label mb-0">Memuat anggota...</p>
          </div>
        `;
            }

            return fetch(`{{ url('api/boards') }}/${boardId}/members`, {
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json',
                    },
                    signal: AbortSignal.timeout(10000) // 10 second timeout
                })
                .then(response => {
                    if (!response.ok) throw new Error(`HTTP ${response.status}`);
                    return response.json();
                })
                .then(data => {
                    if (data.success && data.members) {
                        // Cache the result
                        memberCache.set(cacheKey, {
                            members: data.members,
                            timestamp: Date.now()
                        });

                        selectedMembers = data.members;
                    } else {
                        selectedMembers = [];
                    }

                    renderSelectedMembers();
                    updateHiddenInput();
                    return selectedMembers;
                })
                .catch(error => {
                    console.error('Error loading board members:', error);
                    selectedMembers = [];

                    if (container) {
                        const errorMsg = error.name === 'TimeoutError' ?
                            'Waktu tunggu habis. Silakan coba lagi.' :
                            'Gagal memuat anggota';

                        container.innerHTML = `
            <div class="text-center text-danger py-3">
              <i class="fas fa-exclamation-triangle mb-2" style="font-size: 14px;"></i>
              <p class="dropdown-label mb-0">${errorMsg}</p>
            </div>
          `;
                    }

                    renderSelectedMembers();
                    updateHiddenInput();
                    throw error;
                });
        }

        // Clear member cache when board is updated
        function clearMemberCache(boardId) {
            if (boardId) {
                memberCache.delete(`board_${boardId}`);
            } else {
                memberCache.clear();
            }
        }

        // Helper: Get board background style
        function getBoardBackgroundStyle(board) {
            const DEFAULT_BG = '#1e8c94';

            if (board.background_type === 'image') {
                return `background-image: url('{{ asset('storage') }}/${board.background}'); background-size: cover; background-position: center;`;
            }

            if (board.background && board.background.startsWith('#')) {
                return `background-color: ${board.background};`;
            }

            return `background-color: ${DEFAULT_BG};`;
        }

        // Add new board to page
        function addNewBoardToPage(board) {
            const myBoardsContainer = getElement('my-boards');
            const createBoardCard = myBoardsContainer.querySelector('.create-board-card').parentElement;
            const backgroundStyle = getBoardBackgroundStyle(board);

            const newBoardHtml = `
        <div class="col-xl-3 col-md-6 mb-4" style="opacity: 0; transform: scale(0.8);">
          <div class="card board-card h-100" data-project-id="${board.id}" onclick="openBoard(${board.id})">
            <div class="card-header board-header position-relative" style="${backgroundStyle}">
              <div class="board-pattern"></div>
              <div class="board-dropdown position-absolute" style="top: 10px; right: 10px;">
                <button type="button" class="btn board-options-btn"
                        id="boardOptions${board.id}"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        onclick="event.stopPropagation()"
                        title="Board Options">
                  <i class="fas fa-ellipsis-h"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="boardOptions${board.id}">
                  <li>
                    <a class="dropdown-item"
                       onclick="event.stopPropagation(); editBoard(${board.id}, '${board.title}', '${board.background}')">
                      <i class="fas fa-edit me-2"></i>
                      Ubah board ini
                    </a>
                  </li>
                  <li>
                    <a class="dropdown-item"
                       onclick="event.stopPropagation(); archiveBoard(${board.id}, '${board.title}')">
                      <i class="fas fa-archive me-2"></i>
                      Arsipkan board ini
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="card-body d-flex flex-column">
              <h6 class="mb-0 board-title">${board.title}</h6>
            </div>
          </div>
        </div>
      `;

            createBoardCard.insertAdjacentHTML('beforebegin', newBoardHtml);

            const newBoardCard = createBoardCard.previousElementSibling;
            requestAnimationFrame(() => {
                newBoardCard.style.transition = 'all 0.3s ease';
                newBoardCard.style.opacity = '1';
                newBoardCard.style.transform = 'scale(1)';
            });

            updateBoardCount(myBoardsContainer, 1);
        }

        // Helper: Update board count badge
        function updateBoardCount(container, delta) {
            const badge = container.closest('.card').querySelector('.card-header .badge');
            if (badge) {
                const currentCount = parseInt(badge.textContent.split(' ')[0]);
                badge.textContent = `${currentCount + delta} boards`;
            }
        }

        // Update existing board on page
        function updateBoardOnPage(board) {
            const boardCards = getElements(`.board-card[data-project-id="${board.id}"]`);
            if (boardCards.length === 0) return;

            const myBoardCard = getElement('my-boards')?.querySelector(`.board-card[data-project-id="${board.id}"]`);
            const backgroundStyle = getBoardBackgroundStyle(board);

            boardCards.forEach(boardCard => {
                const titleElement = boardCard.querySelector('.board-title');
                if (titleElement) titleElement.textContent = board.title;

                const headerElement = boardCard.querySelector('.board-header');
                if (headerElement) headerElement.style.cssText = backgroundStyle;

                updateEditButton(boardCard, board);
            });

            if (myBoardCard) {
                highlightBoard(myBoardCard);
            }

            // Update cache with current member list to avoid stale data on next edit
            if (selectedMembers.length > 0 || board.id) {
                const cacheKey = `board_${board.id}`;
                memberCache.set(cacheKey, {
                    members: [...selectedMembers],
                    timestamp: Date.now()
                });
            } else {
                clearMemberCache(board.id);
            }
        }

        // Helper: Update edit button with event listener
        function updateEditButton(boardCard, board) {
            const editLink = boardCard.querySelector('.dropdown-item[onclick*="editBoard"]');
            if (!editLink) return;

            editLink.removeAttribute('onclick');
            const newEditLink = editLink.cloneNode(true);
            editLink.parentNode.replaceChild(newEditLink, editLink);

            newEditLink.addEventListener('click', (e) => {
                e.stopPropagation();
                editBoard(board.id, board.title, board.background || '');
            });
        }

        // Helper: Highlight board temporarily
        function highlightBoard(boardCard) {
            boardCard.style.transition = 'box-shadow 0.3s ease';
            boardCard.style.boxShadow = '0 0 20px rgba(30, 140, 148, 0.6)';
            setTimeout(() => {
                boardCard.style.boxShadow = '';
            }, 1000);
        }

        // Helper: Set loading state for buttons
        function setLoadingState(button, isLoading, loadingText = 'Loading...') {
            if (isLoading) {
                button.disabled = true;
                button.dataset.originalHtml = button.innerHTML;
                button.innerHTML =
                    `<span class="text-white"><i class="fas fa-spinner fa-spin me-1"></i> ${loadingText}</span>`;
            } else {
                button.disabled = false;
                button.innerHTML = button.dataset.originalHtml || '<i class="fas fa-archive me-1"></i> Arsipkan Board';
            }
        }

        // Helper: Handle successful archive
        function handleArchiveSuccess(boardId, boardTitle, presetBoardElements) {
            let boardColumnsToRemove = presetBoardElements || [];

            if (boardColumnsToRemove.length === 0) {
                boardColumnsToRemove = Array.from(getElements(`[data-project-id="${boardId}"]`))
                    .map(card => card.closest('.col-xl-3'))
                    .filter(col => col !== null);
            }

            if (boardColumnsToRemove.length === 0) {
                showAlert('error', 'Board berhasil diarsipkan tetapi tidak dapat memperbarui tampilan.');
                return;
            }

            const sectionsToUpdate = new Set();

            boardColumnsToRemove.forEach((boardColumn, index) => {
                if (!boardColumn) return;

                if (boardColumn.closest('#recently-viewed')) sectionsToUpdate.add('recently-viewed');
                if (boardColumn.closest('#my-boards')) sectionsToUpdate.add('my-boards');

                setTimeout(() => {
                    boardColumn.style.transition = 'all 0.3s ease';
                    boardColumn.style.opacity = '0';
                    boardColumn.style.transform = 'scale(0.8)';

                    setTimeout(() => {
                        boardColumn.remove();

                        if (index === boardColumnsToRemove.length - 1) {
                            updateArchivedSectionCounts(sectionsToUpdate);
                            showAlert('success', `Board "${boardTitle}" berhasil diarsipkan!`);
                        }
                    }, 300);
                }, index * 100);
            });
        }

        // Helper: Update section counts after archive
        function updateArchivedSectionCounts(sectionsToUpdate) {
            sectionsToUpdate.forEach(sectionName => {
                if (sectionName === 'my-boards') {
                    const container = getElement('my-boards');
                    if (container) updateBoardCount(container, -1);
                }
            });
        }

        // Initialize app
        document.addEventListener('DOMContentLoaded', function() {
            const createBoardSubmit = getElement('createBoardSubmit');

            // Handle archive confirmation
            getElement('confirmArchive')?.addEventListener('click', function() {
                const boardId = this.getAttribute('data-board-id');
                const boardTitle = this.getAttribute('data-board-title');
                const confirmButton = this;

                if (!boardId) return;

                setLoadingState(confirmButton, true, 'Archiving...');

                const modal = bootstrap.Modal.getInstance(getElement('archiveModal'));

                fetch(`{{ url('boards') }}/${boardId}/archive`, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'X-Requested-With': 'XMLHttpRequest',
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            action: 'archive'
                        }),
                        signal: AbortSignal.timeout(15000),
                        keepalive: true
                    })
                    .then(response => {
                        if (!response.ok) throw new Error(`HTTP ${response.status}`);
                        return response.json();
                    })
                    .then(data => {
                        if (data.success) {
                            handleArchiveSuccess(boardId, boardTitle, confirmButton
                                .allBoardCardElements);
                            clearMemberCache(boardId);
                            modal.hide();
                        } else {
                            showAlert('error', data.message || 'Gagal untuk mengarsipkan board.');
                        }
                    })
                    .catch(error => {
                        console.error('Archive error:', error);

                        const errorMsg = error.name === 'TimeoutError' ?
                            'Waktu tunggu habis. Board mungkin sudah diarsipkan. Silakan refresh halaman.' :
                            'Terjadi kesalahan saat mengarsipkan board.';

                        showAlert('error', errorMsg);
                    })
                    .finally(() => {
                        setLoadingState(confirmButton, false);
                    });
            });

            // User selection with pagination and search
            let availableUsers = @json($available_users ?? []);
            let currentPage = 1;
            let hasMoreUsers = true;
            let isLoadingUsers = false;
            let currentSearchTerm = '';
            let currentUserRequest = null; // Track ongoing request

            const membersDropdown = getElement('membersDropdownBtn');
            if (membersDropdown) {
                membersDropdown.addEventListener('shown.bs.dropdown', () => {
                    currentPage = 1;
                    hasMoreUsers = true;
                    availableUsers = [];
                    loadAvailableUsers(true);
                });

                const dropdownMenu = document.querySelector('#membersDropdownBtn + .dropdown-menu');
                if (dropdownMenu) {
                    dropdownMenu.addEventListener('click', (e) => e.stopPropagation());
                }
            }

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

                // Cancel previous request if still pending
                if (currentUserRequest) {
                    currentUserRequest.abort();
                }

                isLoadingUsers = true;
                const container = getElement('availableUsers');

                // Create AbortController for this request
                const controller = new AbortController();
                currentUserRequest = controller;

                if (reset) {
                    currentPage = 1;
                    hasMoreUsers = true;
                    container.innerHTML =
                        '<p class="dropdown-label text-center py-2"><i class="fas fa-spinner fa-spin" style="font-size: 14px;"></i> Memuat anggota...</p>';
                } else {
                    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);
                }

                fetch(`{{ url('/api/users') }}?page=${currentPage}&per_page=20&search=${encodeURIComponent(currentSearchTerm)}`, {
                        method: 'GET',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json',
                        },
                        credentials: 'same-origin',
                        signal: controller.signal, // Use controller signal for manual + timeout abort
                        priority: 'high' // Prioritize this request
                    })
                    .then(response => {
                        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
                        return response.json();
                    })
                    .then(data => {
                        getElement('loadingMoreUsers')?.remove();

                        if (data.success) {
                            // Use Set for faster duplicate checking on large lists
                            const existingIds = new Set(availableUsers.map(u => u.id));
                            const newUsers = data.users.filter(u => !existingIds.has(u.id));

                            availableUsers = reset ? data.users : [...availableUsers, ...newUsers];
                            hasMoreUsers = data.pagination.has_more;

                            // Use requestIdleCallback for non-critical rendering
                            if (window.requestIdleCallback) {
                                requestIdleCallback(() => renderAvailableUsers(), {
                                    timeout: 100
                                });
                            } else {
                                renderAvailableUsers();
                            }
                        } else {
                            container.innerHTML =
                                `<p class="dropdown-label text-danger text-center py-2">${data.message || 'Gagal memuat anggota'}</p>`;
                        }
                    })
                    .catch(error => {
                        // Don't show error for aborted requests (user typed new search)
                        if (error.name === 'AbortError') {
                            return;
                        }

                        getElement('loadingMoreUsers')?.remove();
                        console.error('Error loading users:', error);

                        const errorMsg = error.name === 'TimeoutError' ?
                            'Waktu tunggu habis. Silakan coba lagi.' :
                            'Gagal memuat anggota. Silakan muat ulang halaman.';

                        container.innerHTML =
                            `<p class="dropdown-label text-danger text-center py-2">${errorMsg}</p>`;
                    })
                    .finally(() => {
                        isLoadingUsers = false;
                        currentUserRequest = null;
                    });
            }

            // Render available users list
            function renderAvailableUsers() {
                const container = getElement('availableUsers');

                const unselectedUsers = availableUsers.filter(user =>
                    !selectedMembers.some(member => member.id === user.id)
                );

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

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

                container.innerHTML = userItems;

                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 anggota</button>';
                    container.appendChild(loadMoreBtn);

                    getElement('loadMoreUsersBtn').addEventListener('click', (e) => {
                        e.stopPropagation();
                        currentPage++;
                        loadAvailableUsers(false);
                    });
                }

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

                        if (user && !selectedMembers.some(member => member.id === userId)) {
                            selectedMembers.push(user);
                            renderAvailableUsers();
                            renderSelectedMembers();
                            updateHiddenInput();
                        }
                    });
                });

                setupInfiniteScroll();
            }

            // Setup infinite scroll
            function setupInfiniteScroll() {
                const container = getElement('availableUsers');
                container.removeEventListener('scroll', handleUserScroll);
                container.addEventListener('scroll', handleUserScroll);
            }

            function handleUserScroll(e) {
                const {
                    scrollTop,
                    scrollHeight,
                    clientHeight
                } = e.target;

                if (scrollHeight - scrollTop - clientHeight < 50 && hasMoreUsers && !isLoadingUsers) {
                    currentPage++;
                    loadAvailableUsers(false);
                }
            }

            // Search functionality with debounce
            let searchTimeout;
            getElement('memberSearch').addEventListener('input', (e) => {
                currentSearchTerm = e.target.value.toLowerCase();
                clearTimeout(searchTimeout);

                searchTimeout = setTimeout(() => {
                    currentPage = 1;
                    hasMoreUsers = true;
                    availableUsers = [];
                    loadAvailableUsers(true);
                }, 300);
            });

            // Background selection
            document.addEventListener('click', (e) => {
                const backgroundBtn = e.target.closest('.background-option');
                if (!backgroundBtn) return;

                getElements('.background-option').forEach(btn => {
                    btn.classList.remove('selected');
                    const checkmark = btn.querySelector('.background-check');
                    if (checkmark) checkmark.style.display = 'none';
                });

                backgroundBtn.classList.add('selected');
                const checkmark = backgroundBtn.querySelector('.background-check');
                if (checkmark) checkmark.style.display = 'block';

                getElement('selectedBackground').value = backgroundBtn.dataset.bg;
                getElement('backgroundType').value = 'color';
                resetCustomImage();
            });

            // Custom image upload
            const customImageInput = getElement('customImageInput');
            const imagePreview = getElement('imagePreview');
            const imagePreviewContainer = getElement('imagePreviewContainer');
            const customImageUploadBtn = getElement('customImageUploadBtn');
            const removeImageBtn = getElement('removeImageBtn');

            const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
            const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif', 'image/webp'];

            const handleImageLoad = (file) => {
                if (!file) return;

                // Validate file type
                if (!ALLOWED_TYPES.includes(file.type)) {
                    showAlert('danger', 'Format gambar harus JPEG, PNG, JPG, GIF, atau WEBP.');
                    customImageInput.value = '';
                    return;
                }

                // Validate file size
                if (file.size > MAX_FILE_SIZE) {
                    showAlert('danger', 'Ukuran gambar maksimal 5MB. Gambar Anda: ' + (file.size / (1024 *
                        1024)).toFixed(2) + 'MB');
                    customImageInput.value = '';
                    return;
                }

                const reader = new FileReader();
                reader.onload = (event) => {
                    imagePreview.src = event.target.result;
                    imagePreviewContainer.style.display = 'block';
                    customImageUploadBtn.classList.add('has-image');

                    getElements('.background-option').forEach(btn => {
                        btn.classList.remove('selected');
                        const checkmark = btn.querySelector('.background-check');
                        if (checkmark) checkmark.style.display = 'none';
                    });

                    getElement('backgroundType').value = 'image';
                    getElement('selectedBackground').value = '';
                };
                reader.readAsDataURL(file);
            };

            if (customImageInput) {
                customImageInput.addEventListener('change', (e) => handleImageLoad(e.target.files[0]));

                customImageUploadBtn.addEventListener('dragover', (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    customImageUploadBtn.style.borderColor = '#5e72e4';
                    customImageUploadBtn.style.backgroundColor = '#f0f2ff';
                });

                customImageUploadBtn.addEventListener('dragleave', (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    if (!customImageUploadBtn.classList.contains('has-image')) {
                        customImageUploadBtn.style.borderColor = '';
                        customImageUploadBtn.style.backgroundColor = '';
                    }
                });

                customImageUploadBtn.addEventListener('drop', (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    customImageUploadBtn.style.borderColor = '';
                    customImageUploadBtn.style.backgroundColor = '';

                    const file = e.dataTransfer.files[0];
                    if (file && file.type.startsWith('image/')) {
                        customImageInput.files = e.dataTransfer.files;
                        customImageInput.dispatchEvent(new Event('change', {
                            bubbles: true
                        }));
                    }
                });

                if (removeImageBtn) {
                    removeImageBtn.addEventListener('click', (e) => {
                        e.preventDefault();
                        e.stopPropagation();
                        resetCustomImage();

                        const firstColorOption = document.querySelector(
                            '.background-option[data-type="color"]');
                        if (firstColorOption) {
                            firstColorOption.classList.add('selected');
                            const checkmark = firstColorOption.querySelector('.background-check');
                            if (checkmark) checkmark.style.display = 'block';
                            getElement('selectedBackground').value = firstColorOption.dataset.bg;
                            getElement('backgroundType').value = 'color';
                        }
                    });
                }
            }

            // Form submission
            if (createBoardSubmit) {
                createBoardSubmit.addEventListener('click', (e) => {
                    e.preventDefault();

                    const form = getElement('createBoardForm');
                    const formData = new FormData(form);
                    const boardId = getElement('boardId').value;
                    const isEditMode = boardId !== '';

                    const url = isEditMode ? `{{ url('boards') }}/${boardId}` : '{{ url('boards') }}';
                    if (isEditMode) formData.append('_method', 'PUT');

                    const loadingText = isEditMode ? 'Memperbarui...' : 'Membuat...';
                    setLoadingState(createBoardSubmit, true, loadingText);
                    clearBoardValidationErrors();

                    // Optimistic UI: Close modal immediately for better perceived performance
                    const modal = bootstrap.Modal.getInstance(getElement('createBoardModal'));
                    const modalElement = getElement('createBoardModal');

                    fetch(url, {
                            method: 'POST',
                            body: formData,
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            signal: AbortSignal.timeout(20000), // 20 second timeout for file uploads
                        })
                        .then(response => {
                            // Check response status early
                            if (!response.ok) {
                                return response.json().then(data => {
                                    throw {
                                        status: response.status,
                                        data
                                    };
                                });
                            }
                            return response.json();
                        })
                        .then(data => {
                            if (data.success) {
                                // Close modal and reset form
                                modal.hide();

                                // Reset form after modal transition completes
                                setTimeout(() => resetForm(), 300);

                                if (isEditMode) {
                                    updateBoardOnPage(data.board);
                                    showAlert('success',
                                        `Board "${data.board.title}" berhasil diperbarui!`);
                                } else {
                                    addNewBoardToPage(data.board);
                                    showAlert('success',
                                        `Board "${data.board.title}" berhasil dibuat!`);
                                }
                            } else {
                                // Reopen modal if there are errors
                                if (!modalElement.classList.contains('show')) {
                                    modal.show();
                                }

                                if (data.errors) {
                                    displayBoardValidationErrors(data.errors);
                                } else {
                                    const errorMessage = isEditMode ? 'Gagal memperbarui board.' :
                                        'Gagal membuat board.';
                                    showAlert('danger', data.message || errorMessage);
                                }
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);

                            // Reopen modal if there's an error
                            if (!modalElement.classList.contains('show')) {
                                modal.show();
                            }

                            let errorMessage;
                            if (error.name === 'TimeoutError') {
                                errorMessage = 'Waktu tunggu habis. Silakan coba lagi.';
                            } else if (error.status === 422 && error.data?.errors) {
                                // Handle validation errors
                                displayBoardValidationErrors(error.data.errors);
                                return;
                            } else if (error.status === 413) {
                                errorMessage = 'File terlalu besar. Maksimal ukuran file adalah 5MB.';
                            } else {
                                errorMessage = isEditMode ?
                                    'Terjadi kesalahan saat memperbarui board.' :
                                    'Terjadi kesalahan saat membuat board.';
                            }

                            showAlert('danger', errorMessage);
                        })
                        .finally(() => {
                            const submitBtnTextEl = getElement('submitBtnText');
                            const btnText = submitBtnTextEl ? submitBtnTextEl.textContent : (
                                isEditMode ? 'Perbarui Board' : 'Buat Board');
                            setLoadingState(createBoardSubmit, false, btnText);
                        });
                });
            }

            // Validation functions
            function displayBoardValidationErrors(errors) {
                const errorMessages = [];

                if (errors.title) {
                    showBoardFieldError('boardTitle', errors.title[0]);
                    errorMessages.push(errors.title[0]);
                }
                if (errors.background) errorMessages.push(errors.background[0]);
                if (errors.custom_image) errorMessages.push(errors.custom_image[0]);

                if (errorMessages.length > 0) {
                    showAlert('danger', errorMessages.join(' '));
                }
            }

            function showBoardFieldError(inputId, message) {
                const input = getElement(inputId);
                if (!input) return;

                input.classList.add('is-invalid');
                input.parentElement.querySelector('.invalid-feedback')?.remove();

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

            function clearBoardValidationErrors() {
                getElements('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
                getElements('.invalid-feedback').forEach(el => el.remove());
            }

            // Clear error on input
            getElement('boardTitle')?.addEventListener('input', function() {
                this.classList.remove('is-invalid');
                this.parentElement.querySelector('.invalid-feedback')?.remove();
            });
        });

        // Auto-open card functionality
        document.addEventListener('DOMContentLoaded', () => {
            const autoOpenCardId = new URLSearchParams(window.location.search).get('auto_open_card');
            if (autoOpenCardId) findBoardForCard(autoOpenCardId);
        });

        const removeCardParam = () => {
            const newUrl = new URL(window.location);
            newUrl.searchParams.delete('auto_open_card');
            window.history.replaceState({}, '', newUrl);
        };

        // TODO: Optimize this function
        function findBoardForCard(cardId) {
            fetch(`{{ url('/api/cards') }}/${cardId}`, {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Content-Type': 'application/json',
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success && data.card?.list?.board) {
                        window.location.href = `{{ url('boards/show') }}/${data.card.list.board.id}?card=${cardId}`;
                    } else {
                        console.error('Could not find board for card:', cardId);
                        removeCardParam();
                    }
                })
                .catch(error => {
                    console.error('Error finding board for card:', error);
                    removeCardParam();
                });
        }
    </script>
@endpush