@extends('hr-management.layouts.master')
@section('title')
    Boards Lists
@endSection
@section('main-data')
    <section id="decks">
        <div class="board-header d-flex justify-content-between">
            <h1>{{ $board->title }}</h1>
            <ul class="list-unstyled users-list d-flex align-items-center">
                Board Members:
                @forelse ($board->members as $member)
                    @php
                        $nameParts = explode(' ', $member->name);
                        $initials = strtoupper(substr($nameParts[0], 0, 1));
                        if (count($nameParts) > 1) {
                            $initials .= strtoupper(substr($nameParts[1], 0, 1));
                        } else {
                            $initials .= strtoupper(substr($nameParts[0], 1, 1));
                        }
                        $randomColor = sprintf('#%06X', mt_rand(0, 0xffffff));
                    @endphp
                    <li data-toggle="tooltip" data-popup="tooltip-custom" data-placement="bottom"
                        data-original-title="{{ $member->name }}" class="avatar pull-up"
                        style="background-color: {{ $randomColor }}; width:30px; height:30px; overflow:hidden; display:flex; align-items:center; justify-content:center;">
                        @if (!empty($member->image))
                            <img src="{{ asset('images/' . $member->image) }}" alt="{{ $member->name }}"
                                class="rounded-circle" style="width:30px; height:30px; object-fit:cover;">
                        @else
                            <span class="media-object rounded-circle">
                                {{ $initials }}
                            </span>
                        @endif
                    </li>

                @empty
                    No Member Assign.
                @endforelse
            </ul>
            <div>
                <button class="btn btn-sm btn-success" id="openAddBoardMembers" data-board-id="{{ $board->id }}">
                    Add Members <i class="feather icon-user-plus"></i>
                </button>
                <button class="btn btn-sm btn-primary" id="filterButton">
                    Filter <i class="feather icon-filter"></i>
                </button>
                <button class="btn btn-sm btn-info" id="myCardsButton" data-board-id="{{ $board->id }}">
                    My Cards <i class="feather icon-user"></i>
                </button>
                <button class="btn btn-sm btn-secondary" id="viewLogsButton" data-board-id="{{ $board->id }}"
                    data-bs-toggle="modal" data-bs-target="#logsModal">
                    View Logs <i class="fa fa-history" aria-hidden="true"></i>
                </button>

            </div>
        </div>
        <hr class="mt-0">

        @include('hr-management.partials.board-lists', ['board' => $board])

        <!-- Logs Modal -->
        <div class="modal fade" id="logsModal" tabindex="-1" aria-labelledby="logsModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="logsModalLabel">Board Logs</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" style="height: 400px; overflow-y: auto">
                        <!-- Search Input -->
                        <input type="text" id="logSearchInput" class="form-control"
                            placeholder="Search logs by card title, user name, or position">

                        <!-- Reset Search -->
                        <div class="d-flex justify-content-end mb-3">
                            <a href="#" id="resetSearchLink" class="text-decoration-none" style="color: #e67817">Reset
                                Search</a>
                        </div>
                        <ul id="logsList" class="list-group">
                            <!-- Logs  -->
                        </ul>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Add Board Members Modal -->
        <div class="modal fade" id="addBoardMembersModal" tabindex="-1" aria-labelledby="addBoardMembersLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addBoardMembersLabel">Add Members to Board</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <label for="boardMembersSelect" class="form-label">Select Member</label>
                        @php $allMembers = \App\Models\User::select('id','name','image')->get(); @endphp
                        <select id="boardMembersSelect" class="form-control" style="width:100%">
                            <option value="" selected disabled>Select a member</option>
                            @foreach ($allMembers as $user)
                                <option value="{{ $user->id }}" data-name="{{ $user->name }}"
                                    data-image="{{ !empty($user->image) ? asset('images/' . $user->image) : '' }}">
                                    {{ $user->name }}</option>
                            @endforeach
                        </select>

                        <div id="boardSelectedMembers" class="mt-2 row g-2 flex-wrap"
                            style="max-height: 240px; overflow-y: auto; overflow-x: hidden;">
                            @foreach ($board->members as $member)
                                @php
                                    $nameParts = explode(' ', $member->name);
                                    $initials = strtoupper(substr($nameParts[0], 0, 1));
                                    if (count($nameParts) > 1) {
                                        $initials .= strtoupper(substr($nameParts[1], 0, 1));
                                    } else {
                                        $initials .= strtoupper(substr($nameParts[0], 1, 1));
                                    }
                                    $randomColor = sprintf('#%06X', mt_rand(0, 0xffffff));
                                @endphp
                                <div class="col-6 selected-member" data-user-id="{{ $member->id }}"
                                    title="{{ $member->name }}">
                                    <div class="comment-box d-flex align-items-center"
                                        style="background:#f2f2f2; border-radius:10px; padding:8px 10px;">
                                        @if (!empty($member->image))
                                            <img src="{{ asset('images/' . $member->image) }}" alt="{{ $member->name }}"
                                                class="rounded-circle" style="width:36px; height:36px; object-fit:cover;">
                                        @else
                                            <div class="profile-picture" style="background-color: {{ $randomColor }}">
                                                {{ $initials }}</div>
                                        @endif
                                        <div class="comment-content" style="flex:1">
                                            <p class="m-0"><b>{{ $member->name }}</b></p>
                                        </div>
                                        <a href="#" class="text-danger remove-member" style="margin-left:8px"
                                            aria-label="Remove"><i class="feather icon-x"></i></a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="saveBoardMembersBtn"
                            data-board-id="{{ $board->id }}">Save</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal for adding a task -->
        <div class="modal fade" id="addTaskModal" tabindex="-1" aria-labelledby="addTaskModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addTaskModalLabel">Card Detail</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="boardForm" action="{{ route('card.add') }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="list_id" id="listId">
                            <div class="row">
                                <!-- Left Column -->
                                <div class="col-md-8">
                                    <div class="mb-1">
                                        <label for="taskTitle" class="form-label">Title <span
                                                class="text-danger">*</span></label>
                                        <input type="text" class="form-control form-control-sm" placeholder="Name"
                                            id="taskTitle" name="title" required>
                                    </div>
                                    <div class="mb-1">
                                        <label for="desc" class="form-label">Description</label>
                                        <textarea class="form-control form-control-sm" placeholder="Description" id="desc" name="desc"
                                            rows="10"></textarea>
                                    </div>
                                </div>

                                <!-- Right Column -->
                                <div class="col-md-4">
                                    <div class="mb-1">
                                        <label for="Cover Image" class="form-label">Cover Image</label>
                                        <input type="file" class="form-control dropify" id="Cover Image"
                                            accept="image/*" name="image" data-height="292">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4 mb-1">
                                    <label for="addMemberDropdown" class="form-label">Assign Members</label>
                                    <select class="form-control form-control-sm" id="addMemberDropdown">
                                        <option value="" selected disabled>Select a member</option>
                                        @foreach ($board->members as $member)
                                            <option value="{{ $member->id }}" data-name="{{ $member->name }}"
                                                data-image="{{ !empty($member->image) ? asset('images/' . $member->image) : '' }}">
                                                {{ $member->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4 mb-1">
                                    <label for="cardsLabel" class="form-label">Labels</label>
                                    <select class="form-control form-control-sm select-2-tags" multiple="multiple"
                                        id="cardsLabel" name="labels[]"></select>
                                </div>
                                <div class="col-md-4 mb-1">
                                    <label for="deadline" class="form-label">Deadline</label>
                                    <input type="date" class="form-control form-control-sm" placeholder="Deadline"
                                        id="deadline" name="deadline">
                                </div>
                            </div>
                            <div id="addSelectedMembers" class="mt-1 row g-2 flex-wrap"
                                style="max-height: 120px; overflow-y: auto; overflow-x: hidden;"></div>
                            <div class="d-flex justify-content-end mt-2">
                                <button type="submit"
                                    class="btn btn-primary text-center btn-text">Submit</button>
                            </div>
                        </form>
                        <script>
                            // Add Card: members dropdown behavior
                            (function() {
                                var dropdown = document.getElementById('addMemberDropdown');
                                var container = document.getElementById('addSelectedMembers');
                                if (dropdown && container) {
                                    dropdown.addEventListener('change', function() {
                                        var option = dropdown.options[dropdown.selectedIndex];
                                        var userId = option.value;
                                        var userName = option.getAttribute('data-name');
                                        var userImage = option.getAttribute('data-image');
                                        if (!userId) {
                                            return;
                                        }
                                        if (container.querySelector('.selected-member[data-user-id="' + userId + '"]')) {
                                            dropdown.value = '';
                                            return;
                                        }
                                        var initials = userName.split(' ').slice(0, 2).map(function(p) {
                                            return p.charAt(0).toUpperCase();
                                        }).join('');
                                        var wrapperCol = document.createElement('div');
                                        wrapperCol.className = 'col-sm-4 col-md-3 selected-member';
                                        wrapperCol.setAttribute('data-user-id', userId);
                                        wrapperCol.setAttribute('title', userName);
                                        var pictureHtml = userImage ?
                                            '<img src="' + userImage + '" alt="' + userName +
                                            '" class="rounded-circle" style="width:28px; height:28px; object-fit:cover;">' :
                                            '<div class="profile-picture" title="' + userName +
                                            '" style="width:28px; height:28px; font-size:0.7rem; line-height:28px;">' + initials +
                                            '</div>';
                                        var displayName = userName.length > 15 ? userName.substring(0, 15) + '...' : userName;
                                        wrapperCol.innerHTML = '' +
                                            '<div class="comment-box d-flex align-items-center" style="background:#f2f2f2; border-radius:8px; padding:5px 8px;">' +
                                            pictureHtml +
                                            '<div class="comment-content" style="flex:1; padding-left:6px;">' +
                                            '<p class="m-0" style="font-size:0.85rem;"><b>' + displayName + '</b></p>' +
                                            '</div>' +
                                            '<input type="hidden" name="members[]" value="' + userId + '">' +
                                            '<a href="#" class="text-danger remove-member" style="margin-left:4px" aria-label="Remove"><i class="feather icon-x" style="font-size:0.85rem;"></i></a>' +
                                            '</div>';
                                        container.appendChild(wrapperCol);
                                        dropdown.value = '';
                                    });
                                    container.addEventListener('click', function(e) {
                                        var removeLink = e.target && e.target.closest ? e.target.closest('.remove-member') : null;
                                        if (removeLink) {
                                            e.preventDefault();
                                            var node = removeLink.closest('.selected-member');
                                            if (node) node.remove();
                                        }
                                    });
                                }
                            })();
                        </script>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal for edit a task -->
        <style>
            /* Fix modal z-index to ensure content appears above backdrop */
            .modal-backdrop {
                z-index: 1040 !important;
            }
            #editTaskModal {
                z-index: 1055 !important;
            }
            #editTaskModal.show {
                display: block !important;
            }
            #editTaskModal .modal-dialog {
                z-index: 1060 !important;
                position: relative;
            }
            #editTaskModal .modal-content {
                position: relative;
                background-color: #fff;
                border: 1px solid rgba(0,0,0,.2);
                border-radius: 0.3rem;
            }
        </style>
        <div class="modal fade" id="editTaskModal" tabindex="-1" aria-labelledby="editTaskModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editTaskModalLabel">Card Detail</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" id="modalData">
                    </div>
                </div>
            </div>
        </div>

        <div id="filterSidebar" class="filter-sidebar">
            <div class="filter-sidebar-content mt-4">

                <b>
                    <i id="closeFilterButton" class="btn btn-sm feather icon-x btn-danger mb-2"></i>
                </b>

                <div class="filter-section ">
                    <label for="searchFilter">Search</label>
                    <input type="text" id="searchFilter" class="form-control" placeholder="Search tasks...">
                </div>

                <div class="filter-section">
                    <span>Members</span>
                    @if ($board->members->isNotEmpty())
                        <hr>
                    @endif

                    @foreach ($board->members as $member)
                        <fieldset class="checkbox">
                            <div class="vs-checkbox-con vs-checkbox-primary">
                                <input type="checkbox" name="members[]" value="{{ $member->id }}">
                                <span class="vs-checkbox">
                                    <span class="vs-checkbox--check">
                                        <i class="vs-icon feather icon-check"></i>
                                    </span>
                                </span>
                                <span>{{ $member->name }}</span>
                            </div>
                        </fieldset>
                    @endforeach

                    <hr>
                    <fieldset class="checkbox">
                        <div class="vs-checkbox-con vs-checkbox-primary">
                            <input type="checkbox" name="no_member">
                            <span class="vs-checkbox">
                                <span class="vs-checkbox--check">
                                    <i class="vs-icon feather icon-check"></i>
                                </span>
                            </span>
                            <span>No Members</span>
                        </div>
                    </fieldset>

                </div>
                <button id="applyFilter" class="btn btn-primary mt-3">Apply Filters</button>
            </div>
        </div>
    </section>
    <input type="hidden" id="appBasePath" value="{{ url('') }}">
    <style>
        /* Make each list a column with sticky header and scrollable tasks */
        .board-lists {
            gap: 8px;
        }

        .board-list {
            width: 320px;
            max-height: calc(100vh - 220px);
            display: flex;
            flex-direction: column;
            background: #dbdbdb;
            border-radius: 8px;
        }

        .list-header {
            position: sticky;
            top: 0;
            z-index: 2;
            background: #e67717;
            padding: 10px 12px;
            border-bottom: px solid #cacbcc;
        }

        .tasks-container {
            max-height: 80vh;
            overflow-y: auto;
            overflow-x: hidden;
            padding-right: 5px;
            padding-bottom: 80px;
        }

        .tasks-container.sortable {
            min-height: 300px;
            /* Increased from 200px for better drop zone */
            padding-bottom: 20px;
            /* Extra padding for bottom drops */
        }

        .tasks-container.sortable:after {
            content: '';
            display: block;
            height: 150px;
            /* Increased from 100px for larger drop zone at bottom */
            flex: 0 0 auto;
            pointer-events: none;
            /* Don't interfere with drops */
        }

        .task-card {
            user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            cursor: grab;
            margin: 10px 2px 0px 5px !important;
        }

        .task-card:active {
            cursor: grabbing;
        }

        /* Loading spinner should not interfere with drag/drop */
        .card-loading-spinner {
            pointer-events: none;
            position: relative;
            z-index: 1;
        }

        /* Dropify text size */
        .dropify-wrapper .dropify-message p {
            font-size: 12px !important;
        }

        .dropify-wrapper .dropify-message span.file-icon {
            font-size: 30px !important;
        }

        /* Form control font size consistency */
        .form-control-sm,
        .form-control-sm::placeholder {
            font-size: 0.875rem !important;
        }

        /* Fix select dropdown text cutoff issue */
        select.form-control,
        select.form-control-sm {
            line-height: 1.6 !important;
            padding-top: 0.375rem !important;
            padding-bottom: 0.375rem !important;
            min-height: calc(1.5em + 0.75rem + 2px) !important;
        }

        select.form-control-sm {
            line-height: 1.5 !important;
            padding-top: 0.25rem !important;
            padding-bottom: 0.25rem !important;
            min-height: calc(1.5em + 0.5rem + 2px) !important;
        }

        /* Description textarea font size */
        textarea.form-control-sm {
            font-size: 0.875rem !important;
        }

        /* Select2 tags font size and height */
        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            font-size: 0.875rem !important;
            padding: 4px 24px 4px 8px !important;
            margin: 2px 3px !important;
            line-height: 1.4 !important;
            display: inline-flex !important;
            align-items: center !important;
            position: relative !important;
            padding-left: 6px !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            font-size: 1.1rem !important;
            margin-left: auto !important;
            margin-right: 0 !important;
            color: rgba(255, 255, 255, 0.95) !important;
            font-weight: normal !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 16px !important;
            height: 16px !important;
            line-height: 1 !important;
            padding: 0 !important;
            border: none !important;
            border-left: none !important;
            background: transparent !important;
            position: absolute !important;
            right: 4px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            float: none !important;
            order: 2 !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
            color: #fff !important;
            background: rgba(0, 0, 0, 0.25) !important;
            border-radius: 2px !important;
        }

        .select2-container--default .select2-selection--multiple {
            font-size: 0.875rem !important;
            min-height: calc(1.5em + 0.5rem + 2px) !important;
            padding: 0.1rem 0.25rem !important;
        }

        .select2-container .select2-search--inline .select2-search__field {
            font-size: 0.875rem !important;
            margin-top: 2px !important;
            padding: 0 !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__rendered {
            padding: 0 !important;
        }

        @media (max-width: 576px) {
            .board-list {
                width: 85vw;
                max-height: calc(100vh - 240px);
            }
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        $('.filter-section').on('change', 'input[name="no_member"]', function() {
            if ($(this).is(':checked')) {
                $('input[name="members[]"]').prop('checked', false);
            }
        });

        $('.filter-section').on('change', 'input[name="members[]"]', function() {
            if ($(this).is(':checked')) {
                $('input[name="no_member"]').prop('checked', false);
            }
        });

        $('#applyFilter').on('click', function() {

            const boardId = '{{ $board->id }}';
            const search = $('#searchFilter').val();
            const noMember = $('input[name="no_member"]').is(':checked');

            const selectedMembers = [];

            $('input[name="members[]"]:checked').each(function() {
                selectedMembers.push($(this).val());
            });

            let data = {};

            if (search) {
                data.search = search;
            }
            if (noMember) {
                data.no_member = noMember;
            } else if (selectedMembers.length) {
                data.members = selectedMembers;
            }

            $.ajax({
                url: '{{ route('board.filter', ':board') }}'.replace(':board', boardId),
                method: 'GET',
                data: data,
                success: function(response) {
                    const boardLists = $('.board-lists');
                    boardLists.empty().append(response.html);
                    initializeSortable();
                    if (typeof window.reinitInfiniteScroll === 'function') {
                        window.reinitInfiniteScroll();
                    }
                },
                error: function(err) {
                    console.error('Error fetching filtered data:', err);
                }
            });
        });
    </script>
    <script>
        // Quick filter to show only cards assigned to the logged-in user
        (function() {
            var myBtn = document.getElementById('myCardsButton');
            if (!myBtn) return;
            myBtn.addEventListener('click', function() {
                var boardId = this.getAttribute('data-board-id');
                var userId = '{{ auth()->id() }}';
                $.ajax({
                    url: '{{ route('board.filter', ':board') }}'.replace(':board', boardId),
                    method: 'GET',
                    data: {
                        'members': [userId]
                    },
                    success: function(response) {
                        var boardLists = $('.board-lists');
                        boardLists.empty().append(response.html);
                        initializeSortable();
                        if (typeof window.reinitInfiniteScroll === 'function') {
                            window.reinitInfiniteScroll();
                        }
                    },
                    error: function(err) {
                        console.error('Error fetching My Cards:', err);
                    }
                });
            });
        })();
    </script>
    <script>
        document.getElementById('viewLogsButton').addEventListener('click', function() {
            const boardId = this.getAttribute('data-board-id');
            const logsList = document.getElementById('logsList');
            const searchInput = document.getElementById('logSearchInput');
            const resetLink = document.getElementById('resetSearchLink');
            logsList.innerHTML = '<li class="list-group-item">Loading...</li>';

            // Build URL using base path from hidden input (works on subfolder deployments)
            const base = document.getElementById('appBasePath')?.value || '';
            const logsUrl = `${base}/boards/${boardId}/logs`;

            fetch(logsUrl)
                .then(response => response.json())
                .then(logs => {
                    logsList.innerHTML = '';
                    if (logs.length > 0) {
                        const allLogs = logs.map(log => ({
                            message: log.message,
                            date: log.formatted_date,
                            time: log.formatted_time,
                        }));
                        displayLogs(allLogs, logsList);
                        searchInput.addEventListener('input', function() {
                            const query = this.value.toLowerCase();
                            const filteredLogs = allLogs.filter(log =>
                                log.message.toLowerCase().includes(query)
                            );
                            displayLogs(filteredLogs, logsList);
                        });
                        resetLink.addEventListener('click', function(event) {
                            event.preventDefault();
                            searchInput.value = '';
                            displayLogs(allLogs, logsList);
                        });
                    } else {
                        logsList.innerHTML = '<li class="list-group-item">No logs available.</li>';
                    }
                })
                .catch(error => {
                    logsList.innerHTML = '<li class="list-group-item text-danger">Error fetching logs.</li>';
                    console.error('Error fetching logs:', error);
                });
        });

        function displayLogs(logs, logsList) {
            logsList.innerHTML = '';
            if (logs.length > 0) {
                logs.forEach(log => {
                    const logItem = document.createElement('li');
                    logItem.className = 'list-group-item';
                    logItem.textContent = `${log.message} (${log.date} at ${log.time})`;
                    logsList.appendChild(logItem);
                });
            } else {
                logsList.innerHTML = '<li class="list-group-item">No matching logs found.</li>';
            }
        }
    </script>

    <script>
        // Auto-open card modal from notification
        $(document).ready(function() {
            const urlParams = new URLSearchParams(window.location.search);
            const cardId = urlParams.get('card');
            const fromNotification = urlParams.get('from_notification');
            const assignedBy = urlParams.get('assigned_by');
            const notificationTitle = urlParams.get('notification_title');
            const isNewCard = urlParams.get('is_new_card') === '1';

            if (cardId && fromNotification) {
                // Load and show the card modal
                $.ajax({
                    url: '{{ route('card.edit', ':card') }}'.replace(':card', cardId),
                    method: 'GET',
                    success: function(response) {
                        $('#modalData').html(response.html);

                        // Add notification banner to the modal
                        if (assignedBy) {
                            const bannerIcon = isNewCard ? 'icon-star' : 'icon-user-plus';
                            const bannerColor = '#e67817'; // Project's primary orange color
                            const bannerTitle = isNewCard ? 'New Card Assignment' : 'Added to Card';
                            const bannerMessage = isNewCard ?
                                `<strong>${assignedBy}</strong> has created a new card and assigned you to it.` :
                                `<strong>${assignedBy}</strong> has added you to this card.`;
                            const bannerTip = isNewCard ?
                                'Review the card details below and start working on your new task.' :
                                'Check the activities and comments to catch up on the progress.';

                            const banner = `
                                <div class="notification-banner-wrapper" style="margin-bottom: 20px; animation: slideInDown 0.5s ease-out;">
                                    <div class="notification-banner" style="background: #fff; border: 2px solid ${bannerColor}; border-radius: 8px; padding: 16px 20px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); position: relative;">
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close" 
                                                style="position: absolute; top: 12px; right: 16px; color: #6c757d; opacity: 0.8; font-size: 20px; font-weight: 300;">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                        <div class="d-flex align-items-start">
                                            <div class="notification-icon" style="background: ${bannerColor}; width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0;">
                                                <i class="feather ${bannerIcon}" style="color: white; font-size: 20px;"></i>
                                            </div>
                                            <div style="flex: 1; padding-right: 20px;">
                                                <h5 class="mb-1" style="color: #2c3e50; font-weight: 600; font-size: 16px; margin: 0;">
                                                    ${bannerTitle}
                                                </h5>
                                                <p class="mb-2" style="color: #495057; font-size: 14px; line-height: 1.5; margin: 4px 0;">
                                                    ${bannerMessage}
                                                </p>
                                                <div style="background: #fff3e6; border-left: 3px solid ${bannerColor}; padding: 8px 12px; border-radius: 4px; margin-top: 10px;">
                                                    <p class="mb-0" style="color: #856404; font-size: 13px; line-height: 1.4;">
                                                        <i class="feather icon-info" style="font-size: 12px; margin-right: 4px;"></i>
                                                        ${bannerTip}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <style>
                                    @keyframes slideInDown {
                                        from {
                                            opacity: 0;
                                            transform: translateY(-15px);
                                        }
                                        to {
                                            opacity: 1;
                                            transform: translateY(0);
                                        }
                                    }
                                    .notification-banner:hover {
                                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
                                        transition: box-shadow 0.3s ease;
                                    }
                                    .notification-icon {
                                        transition: transform 0.3s ease;
                                    }
                                    .notification-banner:hover .notification-icon {
                                        transform: scale(1.05);
                                    }
                                </style>
                            `;
                            $('#modalData').prepend(banner);
                        }

                        $('#editTaskModal').modal('show');

                        // Clean up URL without reloading
                        if (window.history.replaceState) {
                            const cleanUrl = window.location.pathname;
                            window.history.replaceState({}, document.title, cleanUrl);
                        }
                    },
                    error: function(xhr) {
                        console.error('Failed to load card data:', xhr.responseText);
                        toastr.error('Failed to load card details');
                    },
                });
            }
        });
    </script>

    <script>
        // Infinite Scroll for Cards
        $(document).ready(function() {
            const loadingCards = new Set(); // Track which lists are currently loading

            function initInfiniteScroll() {
                $('.tasks-container').each(function() {
                    const container = $(this);
                    const listId = container.data('list-id');
                    const totalCards = parseInt(container.data('total'));
                    let loadedCards = parseInt(container.data('loaded'));

                    // Skip if all cards are loaded
                    if (loadedCards >= totalCards) {
                        return;
                    }

                    // Add scroll event listener
                    container.off('scroll.infiniteScroll').on('scroll.infiniteScroll', function() {
                        // Check if we're near the bottom (within 100px)
                        const scrollTop = container.scrollTop();
                        const scrollHeight = container[0].scrollHeight;
                        const clientHeight = container.height();

                        if (scrollTop + clientHeight >= scrollHeight - 100) {
                            // Check if not already loading
                            if (!loadingCards.has(listId)) {
                                const loadedCount = parseInt(container.data('loaded'));
                                const total = parseInt(container.data('total'));

                                // Check if there are more cards to load
                                if (loadedCount < total) {
                                    loadMoreCards(listId, container);
                                }
                            }
                        }
                    });
                });
            }

            function loadMoreCards(listId, container) {
                // Mark as loading
                loadingCards.add(listId);

                const loadedCount = parseInt(container.data('loaded'));
                const spinner = container.find('.card-loading-spinner');

                // Show spinner
                spinner.show();

                // Make AJAX request
                $.ajax({
                    url: '{{ route('board.loadMoreCards', ':listId') }}'.replace(':listId', listId),
                    method: 'GET',
                    data: {
                        offset: loadedCount
                    },
                    success: function(response) {
                        if (response.success && response.html) {
                            // Insert new cards before the spinner
                            spinner.before(response.html);

                            // Update loaded count
                            const newLoadedCount = loadedCount + 20;
                            container.data('loaded', newLoadedCount);

                            // Re-initialize tooltips and feather icons
                            if (typeof feather !== 'undefined') {
                                feather.replace();
                            }
                            $('[data-toggle="tooltip"]').tooltip();

                            // Re-initialize sortable for new cards
                            if (typeof initializeSortable === 'function') {
                                initializeSortable();
                            }
                        }
                    },
                    error: function(xhr) {
                        console.error('Failed to load more cards:', xhr.responseText);
                        if (typeof toastr !== 'undefined') {
                            toastr.error('Failed to load more cards');
                        }
                    },
                    complete: function() {
                        // Hide spinner
                        spinner.hide();
                        // Remove loading state
                        loadingCards.delete(listId);
                    }
                });
            }

            // Initialize on page load
            initInfiniteScroll();

            // Re-initialize after filters or updates
            window.reinitInfiniteScroll = initInfiniteScroll;
        });
    </script>
@endSection