@push('css')
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" />
<style>
    .board-theme-dark {
        color: #fff;
    }

    .board-theme-light {
        color: #000;
    }
</style>
@endpush

<div class="container-fluid py-4 centered-container">
    <div class="row mt-4 justify-content-center">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        @php
                        $selectedProperty = collect($properties)->firstWhere('property_id', $selectedPropertyId);
                        @endphp
                        @if (is_object($selectedProperty) && property_exists($selectedProperty, 'name'))
                        Notes for "{{ $selectedProperty->name }}"
                        @elseif (is_array($selectedProperty) && isset($selectedProperty['name']))
                        Notes for "{{ $selectedProperty['name'] }}"
                        @else
                        No Property Selected
                        @endif
                    </h5>
                    <div class="d-flex align-items-center">
                        <button class="btn bg-gradient-info btn-icon-only mb-0" id="add-new-board-btn"
                            data-bs-toggle="modal" data-bs-target="#new-board-modal">
                            <i class="material-icons text-lg">add</i>
                        </button>
                        <input id="kanban-search" type="text" class="form-control ms-3" placeholder="Search notes… (press f)"
                            wire:model.debounce.300ms="search">
                        <div class="form-check form-switch ms-3" title="Compact mode">
                            <input class="form-check-input" type="checkbox" id="ui-compact-toggle">
                            <label class="form-check-label" for="ui-compact-toggle">Compact</label>
                        </div>
                        <select id="ui-font-size" class="form-control w-auto ms-2" title="Font size">
                            <option value="normal">Normal</option>
                            <option value="small">Small</option>
                            <option value="large">Large</option>
                        </select>
                        <select class="form-control w-auto ms-3" wire:model="labelFilter">
                            <option value="">All Labels</option>
                            @foreach($labels as $label)
                                @php
                                    $id = is_array($label) ? ($label['id'] ?? null) : ($label->id ?? null);
                                    $name = is_array($label) ? ($label['name'] ?? '') : ($label->name ?? '');
                                @endphp
                                <option value="{{ $id }}">{{ $name }}</option>
                            @endforeach
                        </select>
                        <select class="form-control w-auto ms-3" wire:model="assigneeFilter">
                            <option value="">All Assignees</option>
                            @foreach($teamMembers as $member)
                                @php
                                    $id = is_array($member) ? ($member['id'] ?? null) : ($member->id ?? null);
                                    $name = is_array($member) ? ($member['name'] ?? '') : ($member->name ?? '');
                                @endphp
                                <option value="{{ $id }}">{{ $name }}</option>
                            @endforeach
                        </select>
                        <select id="property-select" class="form-control w-auto ms-3" wire:model="selectedPropertyId">
                            @foreach($properties as $property)
                            @if (is_object($property))
                            <option value="{{ $property->property_id }}">{{ $property->name }}</option>
                            @elseif (is_array($property))
                            <option value="{{ $property['property_id'] }}">{{ $property['name'] }}</option>
                            @endif
                            @endforeach
                        </select>
                        <div class="form-check form-switch ms-3">
                            <input class="form-check-input" type="checkbox" id="show-archived" wire:model="showArchived">
                            <label class="form-check-label" for="show-archived">Show archived</label>
                        </div>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div wire:ignore class="kanban-container position-relative" id="kanban-container" style="width: 100%;">
                        <div id="myKanban"></div>
                        <div id="delete-card-zone" class="delete-card-zone">
                            <i class="material-icons text-danger">delete</i>
                        </div>
                        <div id="delete-board-zone" class="delete-board-zone delete-zone">
                            <i class="material-icons text-danger me-2">delete</i>
                            <span class="text-danger fw-bold">Drop board here to delete</span>
                        </div>
                        <ul id="board-context-menu" class="context-menu list-unstyled" style="display:none;">
                            <li data-action="edit">Edit</li>
                            <li data-action="move">Move</li>
                            <li data-action="copy">Copy</li>
                            <li data-action="watch">Watch</li>
                            <li data-action="archive">Archive</li>
                            <li data-action="restore">Restore</li>
                            <li data-action="delete">Delete</li>
                        </ul>
                        <ul id="card-context-menu" class="context-menu list-unstyled" style="display:none;">
                            <li data-action="edit">Edit</li>
                            <li data-action="move">Move</li>
                            <li data-action="copy">Copy</li>
                            <li data-action="watch">Watch</li>
                            <li data-action="archive">Archive</li>
                            <li data-action="restore">Restore</li>
                            <li data-action="delete">Delete</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Team Members Display -->
    <div class="d-flex justify-content-center mt-4">
        <div class="avatar-group">
            @foreach($teamMembers as $member)
                @php
                    $name = is_array($member) ? ($member['name'] ?? '') : ($member->name ?? '');
                    $photo = is_array($member) ? ($member['photo_path'] ?? '') : ($member->photo_path ?? '');
                @endphp
                <a href="javascript:;" class="avatar avatar-sm rounded-circle" data-bs-toggle="tooltip"
                    data-bs-original-title="{{ $name }}">
                    <img alt="{{ $name }}" src="{{ $photo }}">
                </a>
            @endforeach
        </div>
    </div>

    <!-- New Board Modal -->
    <div class="modal fade" id="new-board-modal" role="dialog">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="h5 modal-title">Choose your new Board Name</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="pt-4 modal-body">
                    <div class="mb-4 input-group">
                        <span class="input-group-text">
                            <i class="far fa-edit"></i>
                        </span>
                        <input class="form-control" placeholder="Board Name" type="text" id="jkanban-new-board-name" />
                    </div>
                    <div class="mb-4 input-group">
                        <span class="input-group-text"><i class="material-icons">palette</i></span>
                        <input type="color" class="form-control form-control-color" id="jkanban-new-board-color" value="#ffffff">
                    </div>
                    <div class="mb-4 input-group">
                        <span class="input-group-text"><i class="material-icons">image</i></span>
                        <input type="file" class="form-control" id="jkanban-new-board-image">
                    </div>
                    <div class="mb-4 input-group">
                        <span class="input-group-text"><i class="material-icons">style</i></span>
                        <select class="form-control" id="jkanban-new-board-theme">
                            <option value="light">Light</option>
                            <option value="dark">Dark</option>
                        </select>
                    </div>
                    <div class="text-end">
                        <button class="m-1 btn btn-primary" id="jkanban-add-new-board">
                            Save changes
                        </button>
                        <button class="m-1 btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Task Info Modal -->
    <div class="modal fade" id="jkanban-info-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="h5 modal-title">Task details</h5>
                    <button type="button" class="btn-close text-dark" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="pt-4 modal-body">
                    <div class="row">
                        <div class="col-md-7">
                            <div class="mb-4">
                                <livewire:checklist :cardId="$currentCard" :items="$checklistItems" :key="'checklist-' . $currentCard" />
                            </div>
                            <div class="mb-4">
                                <livewire:comments-list :cardId="$currentCard" :key="'comments-' . $currentCard" />
                            </div>
                            <div class="mb-4">
                                <h6>Activity</h6>
                                <ul class="list-unstyled">
                                    @foreach($activities as $activity)
                                        <li class="mb-2">
                                            <strong>{{ $activity['user_name'] }}</strong>
                                            {{ $activity['description'] }}
                                            <small class="text-muted d-block">{{ \Carbon\Carbon::parse($activity['created_at'])->diffForHumans() }}</small>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-5 d-flex flex-column details-pane hide-scrollbars" style="max-height: 70vh; overflow-y: auto;">
                            <input id="jkanban-task-id" class="d-none" />

                            <fieldset class="mb-3">
                                <legend class="d-flex align-items-center">
                                    <i class="material-icons me-1">info</i> Details
                                </legend>
                                <div class="input-group input-group-static mb-3">
                                    <label>Task Title</label>
                                    <input class="form-control" placeholder="Task Title" id="jkanban-task-title" type="text">
                                </div>
                                <div class="input-group input-group-static mb-3">
                                    <label>Task Assignee</label>
                                    <select id="jkanban-task-assignees" class="form-control" multiple>
                                        @foreach($teamMembers as $member)
                                            @php
                                                $id = is_array($member) ? ($member['id'] ?? null) : ($member->id ?? null);
                                                $name = is_array($member) ? ($member['name'] ?? '') : ($member->name ?? '');
                                            @endphp
                                            <option value="{{ $id }}">{{ $name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="input-group input-group-static mb-3">
                                    <label>Due Date</label>
                                    <input class="form-control" type="date" id="jkanban-task-due-date">
                                </div>
                                <div class="input-group input-group-static mb-3">
                                    <label>Task Description</label>
                                    <textarea class="form-control" placeholder="Task Description" id="jkanban-task-description" rows="4"></textarea>
                                </div>
                            </fieldset>

                            <fieldset class="mb-3">
                                <legend class="d-flex align-items-center">
                                    <i class="material-icons me-1">attach_file</i> Attachments
                                </legend>
                                <div class="input-group input-group-static mb-3">
                                    <label>Upload Photo</label>
                                    <div id="jkanban-task-image-dropzone" class="dropzone" wire:ignore>
                                        <div class="dz-message">Drop files here or click to browse.</div>
                                    </div>
                                </div>
                                <div class="input-group input-group-static mb-3">
                                    <label>Upload Attachment</label>
                                    <div id="jkanban-task-attachment-dropzone" class="dropzone" wire:ignore>
                                        <div class="dz-message">Drop files here or click to browse.</div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <ul class="attachment-list" id="jkanban-attachment-list"></ul>
                                </div>
                            </fieldset>

                            <fieldset class="mb-3">
                                <legend class="d-flex align-items-center">
                                    <i class="material-icons me-1">label</i> Labels
                                </legend>
                                <div class="input-group input-group-static">
                                    <label>Labels</label>
                                    <select id="jkanban-task-labels" class="form-control" multiple>
                                        @foreach($labels as $label)
                                            @php
                                                $labelId = is_array($label) ? $label['id'] : ($label->id ?? null);
                                                $labelName = is_array($label) ? $label['name'] : ($label->name ?? '');
                                            @endphp
                                            <option value="{{ $labelId }}">{{ $labelName }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </fieldset>

                            <div class="alert alert-success d-none mb-3">Changes saved!</div>
                            <div class="text-end mt-auto sticky-modal-actions">
                                @if($isWatching)
                                    <button class="m-1 btn btn-outline-warning" wire:click="unwatchCard">Unwatch</button>
                                @else
                                    <button class="m-1 btn btn-outline-info" wire:click="watchCard">Watch</button>
                                @endif
                                <button class="m-1 btn btn-primary" id="jkanban-update-task">Save changes</button>
                                <button class="m-1 btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('js')
<!-- Include Bootstrap 5 -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>

<!-- Kanban scripts -->
<script src="{{ asset('assets/js/plugins/dragula/dragula.min.js') }}"></script>
<script src="{{ asset('assets/js/plugins/jkanban/jkanban.js') }}"></script>
<script src="{{ asset('assets/js/plugins/perfect-scrollbar.min.js') }}"></script>

<!-- Dropzone.js -->
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<script src="{{ asset('js/kanban-shortcuts.js') }}"></script>

<!-- Custom Styles for Modal Handling -->
<style>
    /* Global hidden scrollbars */
    .hide-scrollbars { -ms-overflow-style: none; scrollbar-width: none; }
    .hide-scrollbars::-webkit-scrollbar { display: none; }
    .kanban-container { display: flex; overflow-x: auto; white-space: nowrap; padding: 15px; width: 100% !important; box-sizing: border-box; position: relative; -webkit-overflow-scrolling: touch; }
    .kanban-container.hide-scrollbars { -ms-overflow-style: none; scrollbar-width: none; }
    .kanban-container.hide-scrollbars::-webkit-scrollbar { display: none; }
    /* Hide any descendant scrollbars within Notes interface */
    #kanban-container * { -ms-overflow-style: none; scrollbar-width: none; }
    #kanban-container *::-webkit-scrollbar { display: none; }

    .kanban-board { flex-grow: 1; margin-right: 15px; min-width: 300px; max-width: 300px; }
    .kanban-board .kanban-drag { max-height: calc(100vh - 330px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .kanban-board .kanban-drag.hide-scrollbars { -ms-overflow-style: none; scrollbar-width: none; }
    .kanban-board .kanban-drag.hide-scrollbars::-webkit-scrollbar { display: none; }

    .kanban-title-board {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Card look and feel */
    .kanban-item {
        border-radius: 10px;
        padding: 10px 12px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }
    .kanban-item:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.12); transform: translateY(-1px); }
    .kanban-card-title {
        font-weight: 600;
        line-height: 1.3;
        margin-bottom: 6px;
        word-break: break-word;
    }
    .kanban-labels {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 6px;
    }
    .label-chip {
        display: inline-block;
        min-width: 12px;
        height: 8px;
        border-radius: 4px;
        padding: 0 6px;
        line-height: 14px;
        font-size: 11px;
        color: #fff;
        box-shadow: inset 0 -1px rgba(0,0,0,0.15);
    }
    .kanban-card-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 8px;
        gap: 6px;
    }
    .kanban-card-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #6b7280;
        font-size: 12px;
    }
    .kanban-card-meta .material-icons {
        font-size: 16px;
        vertical-align: middle;
    }
    .board-menu-btn { opacity: 0.75; }
    .board-menu-btn:hover { opacity: 1; }
    /* Improve board header readability on background images */
    .kanban-board[style*="background-image"] .kanban-board-header {
        background: rgba(0,0,0,0.35);
        color: #fff;
        border-radius: 6px 6px 0 0;
    }
    .due-pill {
        font-size: 12px;
        padding: 2px 6px;
        border-radius: 6px;
        background: #eef2ff;
        color: #374151;
    }
    .due-pill.overdue { background: #fee2e2; color: #991b1b; }

    .card-photo img { border-radius: 8px; object-fit: cover; }

    .avatar-group-sm .avatar {
        width: 22px;
        height: 22px;
        border: 2px solid #fff;
        box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
    }
    .avatar-group-sm .more-count {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #f3f4f6;
        color: #374151;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        border: 2px solid #fff;
    }

    /* Add-list ghost column */
    .add-list-ghost {
        min-width: 300px;
        max-width: 300px;
        border: 2px dashed #d1d5db;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6b7280;
        background: #f9fafb;
        cursor: pointer;
        padding: 10px;
        height: fit-content;
    }
    .add-list-ghost:hover { background: #f3f4f6; }

    /* Compact mode */
    .kanban-compact .kanban-item { padding: 6px 8px; }
    .kanban-compact .kanban-card-meta { gap: 6px; font-size: 11px; }
    .kanban-font-small { font-size: 0.95rem; }
    .kanban-font-large { font-size: 1.05rem; }

    /* Delete zone for cards (bottom) */
    .delete-card-zone {
        position: absolute;
        bottom: 10px;
        left: 0;
        width: 100%;
        height: 60px;
        background-color: rgba(255, 0, 0, 0.2);
        border: 2px dashed red;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1060;
        opacity: 0;
        pointer-events: none;
        transition: background-color 0.3s ease, opacity 0.3s ease;
    }

    .delete-card-zone.show {
        opacity: 1;
        pointer-events: auto;
        background-color: rgba(255, 0, 0, 0.5);
    }

    /* Delete zone for boards (bottom, like cards) */
    .delete-board-zone {
        position: absolute;
        bottom: 80px; /* stacked above the card zone */
        left: 0;
        width: 100%;
        height: 60px;
        background-color: rgba(255, 0, 0, 0.15);
        border: 2px dashed red;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1060;
        opacity: 0;
        pointer-events: none;
        transition: background-color 0.3s ease, opacity 0.3s ease;
    }

    .delete-board-zone.show {
        opacity: 1;
        pointer-events: auto;
        background-color: rgba(255, 0, 0, 0.5);
    }

    .kanban-container::-webkit-scrollbar,
    .kanban-board::-webkit-scrollbar {
        display: none;
    }
    /* Hide PerfectScrollbar rails on this interface */
    #kanban-container .ps__rail-x,
    #kanban-container .ps__rail-y {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .modal-backdrop {
        z-index: 1040;
    }

    .modal {
        z-index: 1050;
    }

    /* Sticky header in modals for better UX */
    .modal .modal-header {
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 2;
        border-bottom: 1px solid #e5e7eb;
    }
    /* Sticky footer for modal actions inside the right pane */
    .sticky-modal-actions {
        position: sticky;
        bottom: 0;
        background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0.98));
        border-top: 1px solid #e5e7eb;
        padding-top: 10px;
    }
    /* Subtle background for right-side details pane */
    .details-pane { background: #fafafa; border-left: 1px solid #e5e7eb; }
    .section-block { border-top: 1px dashed #e5e7eb; padding-top: 10px; }
    .section-block:first-of-type { border-top: 0; padding-top: 0; }

    .modal-open .modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    body.modal-open {
        padding-right: 0 !important;
    }

    .attachment-list {
        list-style: none;
        padding-left: 0;
    }

    .attachment-list li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.85rem;
    }

    .attachment-list img {
        max-width: 50px;
        margin-right: 5px;
    }

    .delete-attachment,
    .delete-photo {
        border: none;
        background: transparent;
        padding: 0 4px;
        line-height: 1;
    }

    .due-date {
        font-size: 0.85rem;
        margin-top: 4px;
    }

    .due-date.overdue {
        color: #dc3545;
        font-weight: bold;
    }

    .kanban-item.overdue {
        border-left: 4px solid #dc3545;
    }

    .context-menu {
        position: absolute;
        z-index: 2000;
        background: #fff;
        border: 1px solid #ccc;
        padding: 5px 0;
        min-width: 150px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    }

    .context-menu li {
        padding: 5px 15px;
        cursor: pointer;
    }

    .context-menu li:hover {
        background: #f0f0f0;
    }

    /* Clean up heavy details within cards; keep details in modal only */
    .kanban-item .attachment-list,
    .kanban-item .download-all-btn {
        display: none !important;
    }
</style>

<script>
    document.addEventListener('livewire:load', function () {
        var kanban;
        const boardMenu = document.getElementById('board-context-menu');
        const cardMenu = document.getElementById('card-context-menu');
        const labelsOptions = @json($labels);
        const membersOptions = @json($teamMembers);
        let quickPopover = null;

        Dropzone.autoDiscover = false;
        let taskImageFiles = [];
        let taskAttachmentFiles = [];

        const imageDropzone = new Dropzone('#jkanban-task-image-dropzone', {
            url: '#',
            autoProcessQueue: false,
        });
        imageDropzone.on('addedfile', file => {
            taskImageFiles.push(file);
        });

        const attachmentDropzone = new Dropzone('#jkanban-task-attachment-dropzone', {
            url: '#',
            autoProcessQueue: false,
        });
        attachmentDropzone.on('addedfile', file => {
            taskAttachmentFiles.push(file);
        });

        function showMenu(menu, x, y) {
            // Show and clamp within viewport
            menu.style.display = 'block';
            const pad = 8;
            const mw = menu.offsetWidth || 180;
            const mh = menu.offsetHeight || 220;
            const maxLeft = window.scrollX + window.innerWidth - mw - pad;
            const maxTop = window.scrollY + window.innerHeight - mh - pad;
            const left = Math.max(window.scrollX + pad, Math.min(x, maxLeft));
            const top = Math.max(window.scrollY + pad, Math.min(y, maxTop));
            menu.style.left = left + 'px';
            menu.style.top = top + 'px';
        }

        function hideMenus() {
            boardMenu.style.display = 'none';
            cardMenu.style.display = 'none';
        }

        document.addEventListener('click', function(e){
            if (!e.target.closest('.context-menu')) {
                hideMenus();
            }
        });

        document.addEventListener('keydown', function(e){
            if (e.key === 'Escape') hideMenus();
        });

        boardMenu.addEventListener('click', function(e){
            const action = e.target.dataset.action;
            if (!action) return;
            const boardId = boardMenu.dataset.boardId;
            const title = boardMenu.dataset.boardTitle;
            hideMenus();
            switch(action){
                case 'edit':
                    const currentBg = boardMenu.dataset.boardBackground || '#ffffff';
                    const currentTheme = boardMenu.dataset.boardTheme || 'light';
                    (async () => {
                        const { value: formValues } = await Swal.fire({
                            title: 'Edit Board',
                            html: `
                                <input id="swal-board-title" class="swal2-input" value="${title}">
                                <input type="color" id="swal-board-color" class="swal2-input" value="${currentBg.startsWith('#') ? currentBg : '#ffffff'}">
                                <input type="file" id="swal-board-image" class="swal2-file">
                                <select id="swal-board-theme" class="swal2-input">
                                    <option value="light" ${currentTheme === 'light' ? 'selected' : ''}>Light</option>
                                    <option value="dark" ${currentTheme === 'dark' ? 'selected' : ''}>Dark</option>
                                </select>
                                <input id="swal-board-wip" type="number" min="0" class="swal2-input" placeholder="WIP limit (0 = none)" value="${parseInt(localStorage.getItem('wip_limit_'+boardId)||'0')}">
                            `,
                            focusConfirm: false,
                            showCancelButton: true,
                            preConfirm: () => ({
                                title: document.getElementById('swal-board-title').value,
                                color: document.getElementById('swal-board-color').value,
                                theme: document.getElementById('swal-board-theme').value,
                                file: document.getElementById('swal-board-image').files[0],
                                wip: document.getElementById('swal-board-wip').value
                            })
                        });
                        if (formValues) {
                            const colorVal = formValues.color;
                            const fileInput = formValues.file;
                            let bgColor = colorVal;
                            if (!fileInput) {
                                if (currentBg && !currentBg.startsWith('#') && colorVal === '#ffffff') {
                                    bgColor = null;
                                } else if (currentBg && currentBg.startsWith('#') && colorVal === currentBg) {
                                    bgColor = null;
                                }
                            }
                            const payload = fileInput ? await getBase64(fileInput).then(data => ({name: fileInput.name, data})) : null;
                            localStorage.setItem('wip_limit_'+boardId, String(Math.max(0, parseInt(formValues.wip||'0'))));
                            Livewire.emit('renameBoard', boardId, String(formValues.title||'').trim(), bgColor, formValues.theme, payload);
                        }
                    })();
                    break;
                case 'move':
                    Livewire.emit('moveBoard', boardId);
                    break;
                case 'copy':
                    Livewire.emit('copyBoard', boardId);
                    break;
                case 'watch':
                    Livewire.emit('watchBoard', boardId);
                    break;
                case 'archive':
                    Livewire.emit('archiveBoard', boardId);
                    break;
                case 'restore':
                    Livewire.emit('restoreBoard', boardId);
                    break;
                case 'delete':
                    Livewire.emit('deleteBoard', boardId);
                    break;
            }
        });

        cardMenu.addEventListener('click', function(e){
            const action = e.target.dataset.action;
            if (!action) return;
            const cardId = cardMenu.dataset.cardId;
            const title = cardMenu.dataset.cardTitle;
            hideMenus();
            switch(action){
                case 'edit':
                    Swal.fire({
                        title: 'Rename Card',
                        input: 'text',
                        inputValue: title,
                        showCancelButton: true
                    }).then(res => {
                        if (res.isConfirmed && res.value.trim()) {
                            Livewire.emit('renameCard', cardId, res.value.trim());
                        }
                    });
                    break;
                case 'move':
                    Livewire.emit('moveCard', cardId);
                    break;
                case 'copy':
                    Livewire.emit('copyCard', cardId);
                    break;
                case 'watch':
                    Livewire.emit('watchCard', cardId);
                    break;
                case 'archive':
                    Livewire.emit('archiveCard', cardId);
                    break;
                case 'restore':
                    Livewire.emit('restoreCard', cardId);
                    break;
                case 'delete':
                    Livewire.emit('deleteCard', cardId);
                    break;
            }
        });

        function initializeKanban(boards) {
            document.getElementById("myKanban").innerHTML = "";
            if (!boards || boards.length === 0) {
                document.getElementById("myKanban").innerHTML = `
                    <div class="text-center p-5 w-100">
                        <div class="mb-2"><i class="material-icons" style="font-size:42px;color:#9ca3af;">note</i></div>
                        <div class="mb-2">No boards yet</div>
                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#new-board-modal">Create your first board</button>
                    </div>
                `;
                return;
            }

            kanban = new jKanban({
                element: "#myKanban",
                gutter: "10px",
                click: function(el) {
                    let taskId = el.getAttribute("data-eid");
                    if (!taskId) {
                        return;
                    }
                    Livewire.emit('openCard', taskId);
                },
                buttonClick: function(el, boardId) {
                    if (!document.querySelector("[data-id='" + boardId + "'] .itemform")) {
                        var formItem = document.createElement("form");
                        formItem.setAttribute("class", "itemform");
                        formItem.innerHTML = `
                            <div class="input-group">
                                <textarea class="form-control" rows="2" autofocus></textarea>
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn bg-gradient-success btn-sm pull-end">Add</button>
                                <button type="button" id="kanban-cancel-item" class="btn bg-gradient-light btn-sm pull-end me-2">Cancel</button>
                            </div>`;

                        kanban.addForm(boardId, formItem);
                        formItem.addEventListener("submit", function(e) {
                            e.preventDefault();
                            var text = e.target[0].value;
                            // Enforce WIP limit on add
                            const wip = parseInt(localStorage.getItem('wip_limit_'+boardId) || '0');
                            const boardEl = document.querySelector(`[data-id='${boardId}']`);
                            const count = boardEl ? boardEl.querySelectorAll('.kanban-item').length : 0;
                            if (wip > 0 && count >= wip) {
                                Swal.fire('WIP limit reached', 'Please finish or move cards before adding more.', 'info');
                                formItem.remove();
                                return;
                            }
                            Livewire.emit('addCard', boardId, text);
                            formItem.remove();
                        });
                        document.getElementById("kanban-cancel-item").onclick = function() {
                            formItem.remove();
                        };
                    }
                },
                addItemButton: true,
                boards: boards.map(board => ({
                    ...board,
                    class: board.theme ? `board-theme-${board.theme}` : '',
                    item: board.item.map(card => {
                        let html = '';
                        let isOverdue = false;
                        let coverPath = null;
                        let coverUser = null;
                        if (card.cover_attachment_id && card.attachments) {
                            const coverAtt = card.attachments.find(a => a.id == card.cover_attachment_id);
                            if (coverAtt && coverAtt.mime_type && coverAtt.mime_type.startsWith('image/')) {
                                coverPath = coverAtt.path;
                                coverUser = coverAtt.user;
                            }
                        }
                        if (coverPath) {
                            let uploader = '';
                            if (coverUser) {
                                uploader = `<img src="${coverUser.picture}" class="avatar avatar-xs rounded-circle position-absolute top-0 start-0 m-1" title="${coverUser.name}">`;
                            }
                            html += `<div class="card-photo position-relative mb-1"><img src="/storage/${coverPath}" alt="Photo" style="width:100%;height:auto;">${uploader}</div>`;
                        } else if (card.image) {
                            let uploader = '';
                            if (card.image_user) {
                                uploader = `<img src="${card.image_user.picture}" class="avatar avatar-xs rounded-circle position-absolute top-0 start-0 m-1" title="${card.image_user.name}">`;
                            }
                            html += `<div class="card-photo position-relative mb-1"><img src="/storage/${card.image}" alt="Photo" style="width:100%;height:auto;">${uploader}<button class="btn btn-sm text-danger position-absolute top-0 end-0 delete-photo" data-card="${card.id}">&times;</button></div>`;
                        }
                        const labelIds = (card.labels || []).map(l => l.id).join(',');
                        const assigneeIds = (card.assignees || []).map(a => a.id).join(',');
                        html += `<div class=\"kanban-card-title\">${card.title}</div>`;
                        const dueVal = card.due_date ? new Date(card.due_date) : null;
                        if (dueVal) {
                            isOverdue = dueVal < new Date();
                        }
                        const dueTitle = dueVal ? `Due: ${dueVal.toLocaleDateString()}` : 'Set due date';
                        html += '<div class="card-icons d-flex gap-1 mt-1">';
                        html += `<i class=\"material-icons quick-edit-icon\" data-field=\"labels\" data-card=\"${card.id}\" data-values=\"${labelIds}\" title=\"Edit labels\">label</i>`;
                        html += `<i class=\"material-icons quick-edit-icon\" data-field=\"assignees\" data-card=\"${card.id}\" data-values=\"${assigneeIds}\" title=\"Edit assignees\">person</i>`;
                        html += `<i class=\"material-icons quick-edit-icon ${isOverdue ? 'text-danger' : ''}\" data-field=\"due_date\" data-card=\"${card.id}\" data-value=\"${card.due_date || ''}\" title=\"${dueTitle}\">event</i>`;
                        html += '</div>';
                        // Visible chips + avatars + meta (labels, due, checklist, comments, attachments)
                        const chips = (card.labels || []).map(l => `<span class=\"label-chip\" style=\"background:${l.color || '#6366f1'}\">${l.name}</span>`).join('');
                        const dueHtml = (function(){
                            if (!card.due_date) return '';
                            const d=new Date(card.due_date); const overdue=d<new Date();
                            return `<span class=\"due-pill ${overdue ? 'overdue' : ''}\" title=\"Due: ${d.toLocaleDateString()}\">${d.toLocaleDateString()}</span>`;
                        })();

                        // Checklist progress
                        let checklistHtml = '';
                        if (Number(card.checklist_total) > 0) {
                            const done = Number(card.checklist_done) || 0;
                            const total = Number(card.checklist_total) || 0;
                            const allDone = done === total && total > 0;
                            checklistHtml = `<span title=\"Checklist\" class=\"d-inline-flex align-items-center\"><i class=\"material-icons ${allDone ? 'text-success' : ''}\" style=\"font-size:16px;\">check_box</i><span class=\"ms-1\">${done}/${total}</span></span>`;
                        }

                        // Comments count
                        let commentsHtml = '';
                        if (Number(card.comments_count) > 0) {
                            commentsHtml = `<span title=\"Comments\" class=\"d-inline-flex align-items-center\"><i class=\"material-icons\" style=\"font-size:16px;\">chat_bubble</i><span class=\"ms-1\">${card.comments_count}</span></span>`;
                        }

                        // Attachments count
                        let attachHtml = '';
                        if (Number(card.attachments_count) > 0) {
                            attachHtml = `<span title=\"Attachments\" class=\"d-inline-flex align-items-center\"><i class=\"material-icons\" style=\"font-size:16px;\">attach_file</i><span class=\"ms-1\">${card.attachments_count}</span></span>`;
                        }

                        // Assignees avatars (max 3)
                        let avatarsHtml = '';
                        if ((card.assignees || []).length) {
                            const list = card.assignees.slice(0,3).map(a => `<img class=\"avatar avatar-xs rounded-circle\" src=\"${a.photo}\" alt=\"${a.name}\" title=\"${a.name}\">`).join('');
                            const remaining = card.assignees.length - 3;
                            const more = remaining > 0 ? `<span class=\"more-count\">+${remaining}</span>` : '';
                            avatarsHtml = `<div class=\"avatar-group avatar-group-sm\">${list}${more}</div>`;
                        }

                        const leftMeta = `${chips}${dueHtml}${checklistHtml}${commentsHtml}${attachHtml}`;
                        if (leftMeta || avatarsHtml) {
                            html += `<div class=\"kanban-card-footer\"><div class=\"kanban-card-meta\">${leftMeta}</div><div>${avatarsHtml}</div></div>`;
                        }
                        if (card.attachments && card.attachments.length) {
                            const validAtts = card.attachments.filter(a => a.path);
                            if (validAtts.length) {
                                const urls = validAtts.map(a => `/storage/${a.path}`);
                                const urlData = JSON.stringify(urls).replace(/"/g, '&quot;');
                                html += `<div class="text-end"><button class="btn btn-sm btn-secondary download-all-btn" data-attachments="${urlData}">Download All</button></div>`;
                                html += '<ul class="attachment-list mt-1">';
                                validAtts.forEach(att => {
                                    const fname = att.filename || att.path.split('/').pop();
                                    const userHtml = att.user ? `<img src="${att.user.picture}" class="avatar avatar-xs rounded-circle me-1" title="${att.user.name}">` : '';
                                    html += `<li>${userHtml}<a href="/storage/${att.path}" download target="_blank">${fname}</a> <button class="btn btn-sm text-danger delete-attachment" data-id="${att.id}">&times;</button></li>`;
                                });
                                html += '</ul>';
                            }
                        }
                        html += '<div class="text-end mt-1"><button class="btn btn-sm btn-outline-secondary copy-card-btn" data-id="' + card.id + '">Copy</button></div>';
                        return { ...card, title: html, class: isOverdue ? 'overdue' : '' };
                    })
                }))
            });

            const deleteCardZone = document.getElementById('delete-card-zone');
            const deleteBoardZone = document.getElementById('delete-board-zone');

            function isOverZone(el, zone, target) {
                if (target === zone) return true;
                const dzRect = zone.getBoundingClientRect();
                const elRect = el.getBoundingClientRect();
                return !(
                    elRect.right < dzRect.left ||
                    elRect.left > dzRect.right ||
                    elRect.bottom < dzRect.top ||
                    elRect.top > dzRect.bottom
                );
            }

            function updateCounts() {
               document.querySelectorAll('.kanban-board').forEach(board => {
                   const titleEl = board.querySelector('.kanban-title-board');
                   if (!titleEl) return;
                   let original = titleEl.getAttribute('data-original-title');
                   if (!original) {
                       original = titleEl.textContent.trim();
                       titleEl.setAttribute('data-original-title', original);
                   }
                   const count = board.querySelectorAll('.kanban-item').length;

                   // WIP limit from localStorage
                   const id = board.getAttribute('data-id');
                   const wip = parseInt(localStorage.getItem('wip_limit_'+id) || '0');
                   const exceeded = wip > 0 && count > wip;
                   const suffix = wip > 0 ? ` (${count}/${wip})` : ` (${count})`;
                   titleEl.textContent = `${original}${suffix}`;
                   board.classList.toggle('wip-exceeded', exceeded);

                    // Add board actions button (ellipsis) and theme toggle once
                    if (!board.querySelector('.board-menu-btn')) {
                        const header = board.querySelector('.kanban-board-header');
                        const menuBtn = document.createElement('button');
                        menuBtn.className = 'btn btn-sm btn-outline-secondary board-menu-btn ms-2';
                        menuBtn.innerHTML = '<i class="material-icons" style="font-size:18px;">more_horiz</i>';
                        menuBtn.addEventListener('click', function(e) {
                            e.stopPropagation();
                            const id = board.getAttribute('data-id');
                            const current = titleEl.getAttribute('data-original-title') || titleEl.textContent.trim();
                            boardMenu.dataset.boardId = id;
                            boardMenu.dataset.boardTitle = current;
                            const rect = menuBtn.getBoundingClientRect();
                            showMenu(boardMenu, rect.left + window.scrollX, rect.bottom + window.scrollY);
                        });
                        header.appendChild(menuBtn);

                        // Theme toggle button
                        const themeBtn = document.createElement('button');
                        themeBtn.className = 'btn btn-sm btn-outline-secondary ms-1 board-theme-toggle';
                        const currentTheme = (board.getAttribute('data-theme') || 'light').toLowerCase();
                        const icon = currentTheme === 'dark' ? 'light_mode' : 'dark_mode';
                        themeBtn.innerHTML = `<i class="material-icons" style="font-size:18px;">${icon}</i>`;
                        themeBtn.title = currentTheme === 'dark' ? 'Switch to light' : 'Switch to dark';
                        themeBtn.addEventListener('click', function(e){
                            e.stopPropagation();
                            const id = board.getAttribute('data-id');
                            const titleOriginal = titleEl.getAttribute('data-original-title') || titleEl.textContent.trim();
                            const prevTheme = (board.getAttribute('data-theme') || 'light').toLowerCase();
                            const nextTheme = prevTheme === 'dark' ? 'light' : 'dark';
                            // Optimistic UI update
                            board.setAttribute('data-theme', nextTheme);
                            board.classList.remove('board-theme-light','board-theme-dark');
                            board.classList.add(`board-theme-${nextTheme}`);
                            themeBtn.innerHTML = `<i class="material-icons" style="font-size:18px;">${nextTheme === 'dark' ? 'light_mode' : 'dark_mode'}</i>`;
                            themeBtn.title = nextTheme === 'dark' ? 'Switch to light' : 'Switch to dark';
                            // Persist via Livewire (reuse renameBoard API to set theme)
                            Livewire.emit('renameBoard', id, titleOriginal, null, nextTheme, null);
                        });
                        header.appendChild(themeBtn);
                    }

                    // Add bottom "Add a card" link once
                    const footer = board.querySelector('footer');
                    if (footer && !footer.querySelector('.add-card-link')) {
                        const link = document.createElement('button');
                        link.className = 'btn btn-link text-secondary text-sm add-card-link px-0';
                        link.textContent = '+ Add a card';
                        link.addEventListener('click', function(e){
                            e.preventDefault();
                            e.stopPropagation();
                            const boardId = board.getAttribute('data-id');
                            if (!document.querySelector("[data-id='" + boardId + "'] .itemform")) {
                                var formItem = document.createElement("form");
                                formItem.setAttribute("class", "itemform");
                                formItem.innerHTML = `
                                    <div class=\"input-group\">
                                        <textarea class=\"form-control\" rows=\"2\" autofocus></textarea>
                                    </div>
                                    <div class=\"form-group\">
                                        <button type=\"submit\" class=\"btn bg-gradient-success btn-sm pull-end\">Add</button>
                                        <button type=\"button\" id=\"kanban-cancel-item\" class=\"btn bg-gradient-light btn-sm pull-end me-2\">Cancel</button>
                                    </div>`;
                                kanban.addForm(boardId, formItem);
                                formItem.addEventListener("submit", function(e) {
                                    e.preventDefault();
                                    var text = e.target[0].value;
                                    Livewire.emit('addCard', boardId, text);
                                    formItem.remove();
                                });
                                document.getElementById("kanban-cancel-item").onclick = function() {
                                    formItem.remove();
                                };
                            }
                        });
                        footer.appendChild(link);
                    }

                    // Add quick clone button once
                    if (!board.querySelector('.clone-board-btn')) {
                        const header = board.querySelector('.kanban-board-header');
                        const cloneBtn = document.createElement('button');
                        cloneBtn.className = 'btn btn-sm btn-outline-secondary clone-board-btn ms-2';
                        cloneBtn.textContent = 'Clone';
                        cloneBtn.addEventListener('click', function(e) {
                            e.stopPropagation();
                            const id = board.getAttribute('data-id');
                            Livewire.emit('copyBoard', id);
                        });
                        header.appendChild(cloneBtn);
                    }
               });

               document.querySelectorAll('.kanban-title-board').forEach(title => {
                    title.addEventListener('dblclick', function (e) {
                        const boardId = this.closest('.kanban-board').getAttribute('data-id');
                        const current = this.getAttribute('data-original-title') || this.textContent.trim();
                        Swal.fire({
                            title: 'Rename Board',
                            input: 'text',
                            inputValue: current,
                            showCancelButton: true
                        }).then(res => {
                            if (res.isConfirmed && res.value.trim()) {
                                Livewire.emit('renameBoard', boardId, res.value.trim());
                            }
                        });
                    });

                    title.oncontextmenu = function(e) {
                        e.preventDefault();
                        const boardEl = this.closest('.kanban-board');
                        const boardId = boardEl.getAttribute('data-id');
                        const current = this.getAttribute('data-original-title') || this.textContent.trim();
                        boardMenu.dataset.boardId = boardId;
                        boardMenu.dataset.boardTitle = current;
                        boardMenu.dataset.boardBackground = boardEl.getAttribute('data-background') || '';
                        boardMenu.dataset.boardTheme = boardEl.getAttribute('data-theme') || '';
                        showMenu(boardMenu, e.pageX, e.pageY);
                    };
                });

                document.querySelectorAll('.kanban-item').forEach(item => {
                    item.addEventListener('dblclick', function (e) {
                        const card = e.target.closest('.kanban-item');
                        const cardId = card.getAttribute('data-eid');
                        const current = card.innerText.trim();
                        Swal.fire({
                            title: 'Rename Card',
                            input: 'text',
                            inputValue: current,
                            showCancelButton: true
                        }).then(res => {
                            if (res.isConfirmed && res.value.trim()) {
                                Livewire.emit('renameCard', cardId, res.value.trim());
                            }
                        });
                    });

                    item.oncontextmenu = function(e) {
                        e.preventDefault();
                        const card = e.target.closest('.kanban-item');
                        const cardId = card.getAttribute('data-eid');
                        const current = card.innerText.trim();
                        cardMenu.dataset.cardId = cardId;
                        cardMenu.dataset.cardTitle = current;
                        showMenu(cardMenu, e.pageX, e.pageY);
                    };
                });
                attachAttachmentHandlers();
                attachQuickEditHandlers();
            }

            function attachAttachmentHandlers() {
                document.querySelectorAll('.delete-attachment').forEach(btn => {
                    btn.addEventListener('click', function(e) {
                        e.stopPropagation();
                        const id = this.getAttribute('data-id');
                        Swal.fire({
                            title: 'Delete file?',
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonText: 'Yes'
                        }).then(res => {
                            if (res.isConfirmed) {
                                Livewire.emit('deleteAttachment', id);
                            }
                        });
                    });
                });

                document.querySelectorAll('.delete-photo').forEach(btn => {
                    btn.addEventListener('click', function(e) {
                        e.stopPropagation();
                        const cardId = this.getAttribute('data-card');
                        Swal.fire({
                            title: 'Delete photo?',
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonText: 'Yes'
                        }).then(res => {
                            if (res.isConfirmed) {
                                Livewire.emit('deletePhoto', cardId);
                            }
                        });
                    });
                });

                document.querySelectorAll('.download-all-btn').forEach(btn => {
                    btn.addEventListener('click', function(e) {
                        e.stopPropagation();
                        const urls = JSON.parse(this.getAttribute('data-attachments'));
                        urls.forEach(u => {
                            const a = document.createElement('a');
                            a.href = u;
                            a.setAttribute('download', '');
                            document.body.appendChild(a);
                            a.click();
                            document.body.removeChild(a);
                        });
                    });
                });

                document.querySelectorAll('.copy-card-btn').forEach(btn => {
                    btn.addEventListener('click', function(e) {
                        e.stopPropagation();
                        const id = this.getAttribute('data-id');
                        Livewire.emit('copyCard', id);
                    });
                });
            }

            function attachQuickEditHandlers() {
                document.querySelectorAll('.quick-edit-icon').forEach(icon => {
                    icon.addEventListener('click', function(e) {
                        e.stopPropagation();
                        const cardId = this.getAttribute('data-card');
                        const field = this.getAttribute('data-field');
                        const rect = this.getBoundingClientRect();
                        if (quickPopover) {
                            quickPopover.remove();
                            quickPopover = null;
                        }
                        quickPopover = document.createElement('div');
                        quickPopover.className = 'quick-popover bg-white p-1 border rounded';
                        quickPopover.style.position = 'absolute';
                        quickPopover.style.zIndex = 1000;
                        let top = rect.bottom + window.scrollY;
                        let left = rect.left + window.scrollX;
                        const vw = window.innerWidth;
                        const popW = 240;
                        if (left + popW > vw - 8) { left = vw - popW - 8; }
                        quickPopover.style.top = top + 'px';
                        quickPopover.style.left = left + 'px';

                        if (field === 'due_date') {
                            const input = document.createElement('input');
                            input.type = 'date';
                            input.value = this.getAttribute('data-value') || '';
                            input.addEventListener('change', () => {
                                Livewire.emit('updateCardProperty', cardId, 'due_date', input.value);
                                quickPopover.remove();
                                quickPopover = null;
                            });
                            quickPopover.appendChild(input);
                        } else if (field === 'labels') {
                            const select = document.createElement('select');
                            select.multiple = true;
                            labelsOptions.forEach(l => {
                                const opt = document.createElement('option');
                                opt.value = l.id;
                                opt.textContent = l.name;
                                if (this.dataset.values && this.dataset.values.split(',').includes(String(l.id))) {
                                    opt.selected = true;
                                }
                                select.appendChild(opt);
                            });
                            select.addEventListener('change', () => {
                                const values = Array.from(select.selectedOptions).map(o => o.value);
                                Livewire.emit('updateCardProperty', cardId, 'labels', values);
                            });
                            quickPopover.appendChild(select);
                        } else if (field === 'assignees') {
                            const select = document.createElement('select');
                            select.multiple = true;
                            membersOptions.forEach(m => {
                                const opt = document.createElement('option');
                                opt.value = m.id;
                                opt.textContent = m.name;
                                if (this.dataset.values && this.dataset.values.split(',').includes(String(m.id))) {
                                    opt.selected = true;
                                }
                                select.appendChild(opt);
                            });
                            select.addEventListener('change', () => {
                                const values = Array.from(select.selectedOptions).map(o => o.value);
                                Livewire.emit('updateCardProperty', cardId, 'assignees', values);
                            });
                            quickPopover.appendChild(select);
                        }

                        document.body.appendChild(quickPopover);

                        function outsideClick(ev) {
                            if (!quickPopover.contains(ev.target) && ev.target !== icon) {
                                quickPopover.remove();
                                quickPopover = null;
                                document.removeEventListener('click', outsideClick);
                            }
                        }

                        setTimeout(() => document.addEventListener('click', outsideClick), 0);
                    });
                });
            }

            // Extend jKanban drake containers to include delete zones
            kanban.drake.containers.push(deleteCardZone);
            kanban.drakeBoard.containers.push(deleteBoardZone);

            // Show delete zones when dragging starts
            kanban.drake.on('drag', function () {
                deleteCardZone.classList.add('show');
            });

            kanban.drake.on('dragend', function () {
                deleteCardZone.classList.remove('show');
            });

            kanban.drakeBoard.on('drag', function () {
                deleteBoardZone.classList.add('show');
            });

            kanban.drakeBoard.on('dragend', function () {
                deleteBoardZone.classList.remove('show');
            });

            // Handle dropping into delete zone for cards
            kanban.drake.on('drop', function (el, target, source, sibling) {
                if (isOverZone(el, deleteCardZone, target)) {
                    let cardId = el.getAttribute('data-eid');
                    Swal.fire({
                        title: 'Are you sure?',
                        text: "This will delete the card!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Yes, delete it!'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            Livewire.emit('deleteCard', cardId);
                        }
                    });
                    deleteCardZone.classList.remove('show');
                    updateCounts();
                } else if (target && target !== source) {
                    let cardId = el.getAttribute('data-eid');
                    let boardId = target.parentNode.getAttribute('data-id');
                    Livewire.emit('cardMoved', { cardId, boardId });
                    updateCounts();
                }
            });

            // Handle dropping into delete zone for boards
            kanban.drakeBoard.on('drop', function (el, target, source, sibling) {
                if (isOverZone(el, deleteBoardZone, target)) {
                    let boardId = el.getAttribute('data-id');
                    Swal.fire({
                        title: 'Are you sure?',
                        text: "This will delete the board and all its cards!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Yes, delete it!'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            Livewire.emit('deleteBoard', boardId);
                        }
                    });
                    deleteBoardZone.classList.remove('show');
                    updateCounts();
                } else {
                    const orderedIds = Array.from(document.querySelectorAll('#myKanban .kanban-board'))
                        .map(board => board.getAttribute('data-id'));
                    Livewire.emit('reorderBoards', orderedIds);
                    updateCounts();
                }
            });

            // Ensure invisible scrollbars on container and lists
            const container = document.getElementById('kanban-container');
            container && container.classList.add('hide-scrollbars');
            document.querySelectorAll('.kanban-drag').forEach(el => el.classList.add('hide-scrollbars'));

            // Auto-scroll while dragging: horizontal container + vertical list
            const EDGE = 60;          // px from edge to trigger
            const H_SPEED = 14;       // px per tick horizontal
            const V_SPEED = 12;       // px per tick vertical
            let lastClientX = 0;
            let lastClientY = 0;
            let autoScrollTimer = null;

            const updatePointer = (e) => {
                if (e.touches && e.touches.length) {
                    lastClientX = e.touches[0].clientX;
                    lastClientY = e.touches[0].clientY;
                } else {
                    lastClientX = e.clientX;
                    lastClientY = e.clientY;
                }
            };

            const doAutoScroll = () => {
                if (!container) return;
                const rect = container.getBoundingClientRect();
                // Horizontal within kanban container
                if (lastClientX < rect.left + EDGE) {
                    container.scrollLeft -= H_SPEED;
                } else if (lastClientX > rect.right - EDGE) {
                    container.scrollLeft += H_SPEED;
                }
                // Vertical within the hovered list
                const el = document.elementFromPoint(lastClientX, lastClientY);
                const list = el && el.closest ? el.closest('.kanban-drag') : null;
                if (list) {
                    const lr = list.getBoundingClientRect();
                    if (lastClientY < lr.top + EDGE) {
                        list.scrollTop -= V_SPEED;
                    } else if (lastClientY > lr.bottom - EDGE) {
                        list.scrollTop += V_SPEED;
                    }
                }
            };

            const startAutoScroll = () => {
                document.addEventListener('mousemove', updatePointer);
                document.addEventListener('touchmove', updatePointer, { passive: true });
                if (!autoScrollTimer) autoScrollTimer = setInterval(doAutoScroll, 16);
            };

            const stopAutoScroll = () => {
                document.removeEventListener('mousemove', updatePointer);
                document.removeEventListener('touchmove', updatePointer, { passive: true });
                if (autoScrollTimer) { clearInterval(autoScrollTimer); autoScrollTimer = null; }
            };

            kanban.drake.on('drag', startAutoScroll);
            kanban.drake.on('dragend', stopAutoScroll);
            kanban.drakeBoard.on('drag', startAutoScroll);
            kanban.drakeBoard.on('dragend', stopAutoScroll);

            // Initialize Perfect Scrollbar for the Kanban container and boards (rails hidden via CSS)
            new PerfectScrollbar('#kanban-container');
            document.querySelectorAll('.kanban-board').forEach(board => {
                new PerfectScrollbar(board);
                const id = board.getAttribute('data-id');
                const data = boards.find(b => String(b.id) === String(id));
                if (data) {
                    board.setAttribute('data-background', data.background || '');
                    board.setAttribute('data-theme', data.theme || '');
                    if (data.theme) {
                        board.classList.add(`board-theme-${data.theme}`);
                    }
                    if (data.background) {
                        if (data.background.startsWith('#')) {
                            board.style.background = data.background;
                            board.style.backgroundImage = '';
                        } else {
                            board.style.backgroundImage = `url('/storage/${data.background}')`;
                            board.style.backgroundSize = 'cover';
                            board.style.background = '';
                        }
                    } else {
                        board.style.background = '';
                        board.style.backgroundImage = '';
                    }
                }
            });
            updateCounts();
            attachAttachmentHandlers();

            // Render an "Add another list" ghost column at the end (Trello-like)
            const outer = document.querySelector('#myKanban .kanban-container');
            if (outer) {
                const existingGhost = outer.querySelector('.add-list-ghost');
                if (existingGhost) existingGhost.remove();
                const ghost = document.createElement('div');
                ghost.className = 'kanban-board add-list-ghost ms-2';
                ghost.innerHTML = '<span>+ Add another list</span>';
                ghost.addEventListener('click', function() {
                    Swal.fire({
                        title: 'Add list',
                        input: 'text',
                        inputPlaceholder: 'List name',
                        showCancelButton: true
                    }).then(res => {
                        if (res.isConfirmed && res.value.trim()) {
                            // Default light theme and no image; use color picker default
                            Livewire.emit('addBoard', res.value.trim(), '#ffffff', 'light', null);
                        }
                    });
                });
                outer.appendChild(ghost);
            }
        }

        Livewire.on('kanbanUpdated', function(kanbanBoards) {
            initializeKanban(kanbanBoards);
        });

        initializeKanban(@json($kanbanBoards));

        // UI preferences: compact mode and font size
        (function initUIPreferences(){
            const root = document.getElementById('kanban-container');
            const compactToggle = document.getElementById('ui-compact-toggle');
            const fontSel = document.getElementById('ui-font-size');
            const applyPrefs = () => {
                if (!root) return;
                root.classList.toggle('kanban-compact', localStorage.getItem('kanban_ui_compact') === '1');
                root.classList.remove('kanban-font-small','kanban-font-large');
                const f = localStorage.getItem('kanban_ui_font') || 'normal';
                if (f === 'small') root.classList.add('kanban-font-small');
                if (f === 'large') root.classList.add('kanban-font-large');
            };
            // Load
            if (compactToggle) {
                compactToggle.checked = localStorage.getItem('kanban_ui_compact') === '1';
                compactToggle.addEventListener('change', () => {
                    localStorage.setItem('kanban_ui_compact', compactToggle.checked ? '1' : '0');
                    applyPrefs();
                });
            }
            if (fontSel) {
                const cur = localStorage.getItem('kanban_ui_font') || 'normal';
                fontSel.value = cur;
                fontSel.addEventListener('change', () => {
                    localStorage.setItem('kanban_ui_font', fontSel.value);
                    applyPrefs();
                });
            }
            applyPrefs();
        })();

        // Focus search when Livewire asks (keyboard shortcut "f")
        window.addEventListener('focus-search', function() {
            const el = document.getElementById('kanban-search');
            if (el) { el.focus(); el.select && el.select(); }
        });

        function getBase64(file) {
            return new Promise((resolve) => {
                if (!file) {
                    resolve(null);
                    return;
                }
                const reader = new FileReader();
                reader.onload = () => resolve(reader.result);
                reader.readAsDataURL(file);
            });
        }

        function getFilesData(fileList) {
            return Promise.all(Array.from(fileList || []).map(file => {
                return getBase64(file).then(data => ({ name: file.name, data }));
            }));
        }

        document.getElementById('jkanban-update-task').addEventListener('click', async function() {
            let taskId = document.getElementById("jkanban-task-id").value;
            let taskTitle = document.getElementById("jkanban-task-title").value;
            let assigneeSelect = document.getElementById('jkanban-task-assignees');
            let taskAssignees = Array.from(assigneeSelect.selectedOptions).map(o => o.value);
            let taskDueDate = document.getElementById("jkanban-task-due-date").value;
            let taskDescription = document.getElementById("jkanban-task-description").value;
            let labelSelect = document.getElementById('jkanban-task-labels');
            let selectedLabels = Array.from(labelSelect.selectedOptions).map(o => o.value);

            const [imagesData, attachmentsData] = await Promise.all([
                getFilesData(taskImageFiles),
                getFilesData(taskAttachmentFiles)
            ]);

            Livewire.emit('updateCard', taskId, taskTitle, taskDescription, taskAssignees, taskDueDate, imagesData, attachmentsData, selectedLabels);
            imageDropzone.removeAllFiles(true);
            attachmentDropzone.removeAllFiles(true);
            taskImageFiles = [];
            taskAttachmentFiles = [];
            closeModal('jkanban-info-modal');
        });

        document.getElementById('jkanban-add-new-board').addEventListener('click', async function() {
            let boardName = document.getElementById('jkanban-new-board-name').value;
            let color = document.getElementById('jkanban-new-board-color').value;
            let theme = document.getElementById('jkanban-new-board-theme').value;
            let imgFile = document.getElementById('jkanban-new-board-image').files[0];
            let imgData = await getBase64(imgFile);
            Livewire.emit('addBoard', boardName, color, theme, imgData ? {name: imgFile.name, data: imgData} : null);

            closeModal('new-board-modal');
        });

        // Ensure close buttons hide the modals properly
        document.querySelectorAll('#jkanban-info-modal [data-bs-dismiss="modal"]').forEach(btn => {
            btn.addEventListener('click', () => closeModal('jkanban-info-modal'));
        });

        document.querySelectorAll('#new-board-modal [data-bs-dismiss="modal"]').forEach(btn => {
            btn.addEventListener('click', () => closeModal('new-board-modal'));
        });

        function closeModal(modalId) {
            let modalElement = document.getElementById(modalId);

            if (modalElement.classList.contains('show')) {
                var myModal = new bootstrap.Modal(modalElement);
                myModal.hide();
            }

            modalElement.classList.remove('show');
            modalElement.style.display = 'none';
            document.body.classList.remove('modal-open');

            cleanUpBackdrop();
        }

        function cleanUpBackdrop() {
            document.querySelectorAll('.modal-backdrop').forEach(backdrop => backdrop.remove());
            document.body.classList.remove('modal-open');
            document.body.style.overflow = 'auto';
        }

        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeModal('jkanban-info-modal');
                closeModal('new-board-modal');
            }
        });

        window.addEventListener('show-card-modal', function(event) {
            document.querySelector('#jkanban-task-id').value = event.detail.id;
            document.querySelector('#jkanban-task-title').value = event.detail.title || '';
            const assigneeSelect = document.querySelector('#jkanban-task-assignees');
            const assignees = event.detail.assignees || [];
            Array.from(assigneeSelect.options).forEach(opt => {
                opt.selected = assignees.map(String).includes(opt.value);
            });
            document.querySelector('#jkanban-task-due-date').value = event.detail.due_date || '';
            document.querySelector('#jkanban-task-description').value = event.detail.description || '';
            const labelSelect = document.querySelector('#jkanban-task-labels');
            const selected = event.detail.labels || [];
            Array.from(labelSelect.options).forEach(opt => {
                opt.selected = selected.map(String).includes(opt.value);
            });

            const list = document.getElementById('jkanban-attachment-list');
            list.innerHTML = '';
            const coverId = event.detail.cover_attachment_id;
            (event.detail.attachments || []).forEach(att => {
                const li = document.createElement('li');
                li.classList.add('d-flex', 'align-items-center');
                let preview = '';
                if (att.mime_type && att.mime_type.startsWith('image/')) {
                    preview = `<img src="/storage/${att.path}" class="img-thumbnail me-2" style="max-width:50px;">`;
                }
                const isCover = coverId == att.id;
                const coverBtn = isCover
                    ? `<button class="btn btn-sm btn-success make-cover" data-id="${att.id}" disabled>Cover</button>`
                    : `<button class="btn btn-sm btn-outline-primary make-cover" data-id="${att.id}">Make cover</button>`;
                li.innerHTML = `<div class="d-flex align-items-center">${preview}<a href="/storage/${att.path}" target="_blank">${att.filename}</a></div><div class="ms-auto">${coverBtn} <button class="btn btn-sm text-danger delete-attachment" data-id="${att.id}">&times;</button></div>`;
                list.appendChild(li);
            });
            attachModalAttachmentHandlers();

            // Reset quick add label inputs
            const nl = document.getElementById('new-label-name');
            const nc = document.getElementById('new-label-color');
            if (nl) nl.value = '';
            if (nc) nc.value = '#6366f1';

            var myModal = new bootstrap.Modal(document.getElementById('jkanban-info-modal'), { backdrop: false });
            myModal.show();
        });

        // Add Label quick action
        document.addEventListener('click', function(e){
            if (e.target && e.target.id === 'add-new-label-btn') {
                const name = (document.getElementById('new-label-name')?.value || '').trim();
                const color = document.getElementById('new-label-color')?.value || '#6366f1';
                if (!name) { Swal.fire('Please enter a label name'); return; }
                Livewire.emit('addLabel', name, color);
            }
        });

        // When a label is created server-side, add it to the select and select it
        window.addEventListener('label-added', function(ev){
            const sel = document.getElementById('jkanban-task-labels');
            if (!sel) return;
            const opt = document.createElement('option');
            opt.value = String(ev.detail.id);
            opt.textContent = ev.detail.name;
            opt.selected = true;
            sel.appendChild(opt);
        });
    });

    function attachModalAttachmentHandlers() {
        document.querySelectorAll('#jkanban-attachment-list .delete-attachment').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                const id = this.getAttribute('data-id');
                Swal.fire({
                    title: 'Delete file?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes'
                }).then(res => {
                    if (res.isConfirmed) {
                        Livewire.emit('deleteAttachment', id);
                        this.closest('li').remove();
                    }
                });
            });
        });

        document.querySelectorAll('#jkanban-attachment-list .make-cover').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                const id = this.getAttribute('data-id');
                const cardId = document.getElementById('jkanban-task-id').value;
                Livewire.emit('setCover', cardId, id);
                document.querySelectorAll('#jkanban-attachment-list .make-cover').forEach(b => {
                    b.disabled = false;
                    b.classList.remove('btn-success');
                    b.classList.add('btn-outline-primary');
                    b.textContent = 'Make cover';
                });
                this.disabled = true;
                this.classList.remove('btn-outline-primary');
                this.classList.add('btn-success');
                this.textContent = 'Cover';
            });
        });
    }
</script>
@endpush