@props([
    'tasks' => [],
    'users' => [],
    'className' => ''
])

@php
    $columns = [
        [
            'id' => 'todo',
            'title' => 'To Do',
            'color' => 'bg-body border-light shadow-sm',
            'tasks' => $tasks['todo'] ?? []
        ],
        [
            'id' => 'inprogress',
            'title' => 'In Progress',
            'color' => 'bg-body border-primary shadow-sm',
            'tasks' => $tasks['inprogress'] ?? []
        ],
        [
            'id' => 'review',
            'title' => 'Review',
            'color' => 'bg-body border-warning shadow-sm',
            'tasks' => $tasks['review'] ?? []
        ],
        [
            'id' => 'done',
            'title' => 'Done',
            'color' => 'bg-body border-success shadow-sm',
            'tasks' => $tasks['done'] ?? []
        ]
    ];
    
    $priorityColors = [
        'low' => 'bg-success text-white',
        'medium' => 'bg-warning text-dark',
        'high' => 'bg-danger text-white',
        'urgent' => 'bg-dark text-white'
    ];
    
    $priorityIcons = [
        'low' => 'bx-flag',
        'medium' => 'bx-flag',
        'high' => 'bx-flag',
        'urgent' => 'bx-flag'
    ];
@endphp

<div class="kanban-board {{ $className }}">
    <div class="d-flex gap-4 overflow-x-auto pt-4 pb-4 px-4 w-100 kanban-container">
        @foreach($columns as $column)
            <div class="kanban-column flex-shrink-0">
                <div class="card {{ $column['color'] }} kanban-card kanban-column-container">
                    <div class="card-header bg-body-secondary border-0 pb-2">
                        <div class="d-flex align-items-center">
                            <h6 class="card-title mb-0 fw-semibold d-flex align-items-center gap-2">
                                {{ $column['title'] }}
                                <span class="badge bg-primary text-white">
                                    {{ count($column['tasks']) }}
                                </span>
                            </h6>
                        </div>
                    </div>
                    
                    <div class="card-body pt-0 kanban-scroll hide-scrollbar kanban-tasks-container" 
                         data-column="{{ $column['id'] }}" 
                         ondrop="dropTask(event)" 
                         ondragover="allowDrop(event)"
                         ondragenter="dragEnter(event)"
                         ondragleave="dragLeave(event)">
                        @forelse($column['tasks'] as $task)
                            <div class="card mb-3 border-0 shadow-sm task-card bg-body draggable-task" 
                                 draggable="true" 
                                 data-task-id="{{ $task['id'] ?? uniqid() }}" 
                                 data-task-title="{{ $task['title'] ?? 'Task Title' }}"
                                 data-task-description="{{ $task['description'] ?? '' }}"
                                 data-task-priority="{{ $task['priority'] ?? 'medium' }}"
                                 data-task-due-date="{{ $task['dueDate'] ?? '' }}"
                                 data-task-assignee="{{ isset($task['assignee']) ? $task['assignee']['name'] : '' }}"
                                 onclick="showTaskModal(this)"
                                 ondragstart="dragTask(event)"
                                 ondragend="dragEnd(event)">
                                <div class="card-body p-3">
                                    <div class="d-flex align-items-start justify-content-between mb-2">
                                        <span class="badge {{ $priorityColors[$task['priority'] ?? 'medium'] }} small d-flex align-items-center justify-content-center" style="width: 24px; height: 24px; padding: 0;">
                                            <i class="bx {{ $priorityIcons[$task['priority'] ?? 'medium'] }}"></i>
                                        </span>
                                        <div class="dropdown">
                                            <button class="btn btn-xs btn-outline-secondary" type="button" data-bs-toggle="dropdown" onclick="event.stopPropagation()" style="padding: 0.25rem 0.4rem; font-size: 0.75rem;">
                                                <i class="bx bx-dots-horizontal-rounded" style="font-size: 0.8rem;"></i>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><a class="dropdown-item" href="#" onclick="event.stopPropagation(); deleteTask(this)" data-task-id="{{ $task['id'] ?? '' }}">Delete</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    
                                    <h6 class="card-title mb-2 fw-medium">{{ $task['title'] ?? 'Task Title' }}</h6>
                                    
                                    <div class="d-flex align-items-center justify-content-between text-muted small">
                                        <div class="d-flex align-items-center gap-3">
                                            @if(isset($task['dueDate']))
                                                <div class="d-flex align-items-center gap-1">
                                                    <i class="bx bx-calendar"></i>
                                                    <span>{{ \Carbon\Carbon::parse($task['dueDate'])->format('M d') }}</span>
                                                </div>
                                            @endif
                                        </div>
                                        
                                        @if(isset($task['assignee']))
                                            <div class="avatar avatar-sm">
                                                @if(isset($task['assignee']['avatar']))
                                                    <img src="{{ $task['assignee']['avatar'] }}" alt="{{ $task['assignee']['name'] }}" class="rounded-circle">
                                                @else
                                                    <div class="avatar-initial bg-primary rounded-circle d-flex align-items-center justify-content-center">
                                                        <span class="text-white small fw-bold">
                                                            {{ collect(explode(' ', $task['assignee']['name']))->map(fn($n) => $n[0])->join('') }}
                                                        </span>
                                                    </div>
                                                @endif
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="text-center text-muted py-4">
                                <i class="bx bx-task fs-1 mb-2"></i>
                                <p class="small">No tasks in this column</p>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>

<!-- Task Details Modal -->
<div class="modal fade" id="taskDetailsModal" tabindex="-1" aria-labelledby="taskDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="taskDetailsModalLabel">Task Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-8">
                        <h6 class="fw-bold mb-3" id="modalTaskTitle">Task Title</h6>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Description</label>
                            <p class="text-body" id="modalTaskDescription">No description provided</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card bg-body-secondary">
                            <div class="card-body">
                                <h6 class="card-title fw-semibold mb-3">Task Information</h6>
                                
                                <div class="mb-3">
                                    <label class="form-label fw-semibold small">Priority</label>
                                    <div>
                                        <span class="badge d-flex align-items-center justify-content-center" style="width: 24px; height: 24px; padding: 0;" id="modalTaskPriority">
                                            <i class="bx bx-flag" style="font-size: 0.8rem;"></i>
                                        </span>
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="form-label fw-semibold small">Due Date</label>
                                    <div class="text-body" id="modalTaskDueDate">No due date</div>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="form-label fw-semibold small">Assignee</label>
                                    <div class="text-body" id="modalTaskAssignee">Unassigned</div>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="form-label fw-semibold small">Status</label>
                                    <div class="text-body" id="modalTaskStatus" style="word-wrap: break-word; white-space: nowrap; overflow: visible;">To Do</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </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" onclick="openEditTaskModal()">Edit Task</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Task Modal -->
<div class="modal fade" id="editTaskModal" tabindex="-1" aria-labelledby="editTaskModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editTaskModalLabel">Edit Task</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editTaskForm">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="editTaskTitle" class="form-label">Task Title</label>
                            <input type="text" class="form-control" id="editTaskTitle" name="title" required>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label for="editTaskPriority" class="form-label">Priority</label>
                            <select class="form-select" id="editTaskPriority" name="priority" required>
                                <option value="low">Low</option>
                                <option value="medium" selected>Medium</option>
                                <option value="high">High</option>
                            </select>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label for="editTaskStatus" class="form-label">Status</label>
                            <select class="form-select" id="editTaskStatus" name="status" required>
                                <option value="todo">To Do</option>
                                <option value="inprogress">In Progress</option>
                                <option value="review">Review</option>
                                <option value="done">Done</option>
                            </select>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="editTaskDescription" class="form-label">Description</label>
                        <textarea class="form-control" id="editTaskDescription" name="description" rows="3"></textarea>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="editTaskAssignee" class="form-label">Assign To</label>
                            <select class="form-select" id="editTaskAssignee" name="assignee">
                                <option value="">Select Assignee</option>
                                @foreach($users as $user)
                                    <option value="user-{{ $user->id }}">
                                        {{ $user->first_name }} {{ $user->last_name }}
                                        @if($user->name && $user->name !== $user->first_name . ' ' . $user->last_name)
                                            ({{ $user->name }})
                                        @endif
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="editTaskDueDate" class="form-label">Due Date</label>
                            <input type="date" class="form-control" id="editTaskDueDate" name="dueDate">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Update Task</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Ensure container uses border-box to account for padding in width
    const kanbanContainerEl = document.querySelector('.kanban-container');
    if (kanbanContainerEl) {
        kanbanContainerEl.style.boxSizing = 'border-box';
    }
    // Force hide scrollbars with JavaScript as fallback
    const kanbanScrollElements = document.querySelectorAll('.kanban-scroll');
    kanbanScrollElements.forEach(element => {
        // Apply inline styles to force hide scrollbars
        element.style.scrollbarWidth = 'none';
        element.style.msOverflowStyle = 'none';
        
        // For webkit browsers
        const style = document.createElement('style');
        style.textContent = `
            .kanban-scroll::-webkit-scrollbar {
                display: none !important;
                width: 0px !important;
                height: 0px !important;
                background: transparent !important;
            }
            .kanban-scroll::-webkit-scrollbar-track {
                display: none !important;
                background: transparent !important;
            }
            .kanban-scroll::-webkit-scrollbar-thumb {
                display: none !important;
                background: transparent !important;
            }
            .kanban-scroll::-webkit-scrollbar-corner {
                display: none !important;
                background: transparent !important;
            }
        `;
        document.head.appendChild(style);
    });
    
    // Force hover effects with JavaScript
    const taskCards = document.querySelectorAll('.task-card');
    taskCards.forEach(card => {
        // Add hover class on mouseenter
        card.addEventListener('mouseenter', function() {
            this.style.boxShadow = '0 12px 35px rgba(0, 0, 0, 0.15)';
            this.style.transform = 'translateY(-5px) scale(1.03)';
            this.style.borderColor = 'var(--bs-primary)';
            this.style.background = 'linear-gradient(135deg, var(--bs-body-bg) 0%, rgba(var(--bs-primary-rgb), 0.03) 100%)';
            
            // Add effects to child elements
            const badge = this.querySelector('.badge');
            if (badge) {
                badge.style.transform = 'scale(1.15) rotate(2deg)';
                badge.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.25)';
                
                // Flag icon effects
                const flagIcon = badge.querySelector('i');
                if (flagIcon) {
                    flagIcon.style.transform = 'scale(1.2) rotate(-5deg)';
                }
            }
            
            const title = this.querySelector('.card-title');
            if (title) {
                title.style.color = 'var(--bs-primary)';
                title.style.transform = 'translateX(5px)';
            }
            
            // Avatar hover effects removed
        });
        
        // Remove hover class on mouseleave
        card.addEventListener('mouseleave', function() {
            this.style.boxShadow = '';
            this.style.transform = '';
            this.style.borderColor = '';
            this.style.background = '';
            
            // Reset child elements
            const badge = this.querySelector('.badge');
            if (badge) {
                badge.style.transform = '';
                badge.style.boxShadow = '';
                
                // Reset flag icon
                const flagIcon = badge.querySelector('i');
                if (flagIcon) {
                    flagIcon.style.transform = '';
                }
            }
            
            const title = this.querySelector('.card-title');
            if (title) {
                title.style.color = '';
                title.style.transform = '';
            }
            
            // Avatar reset removed
        });
    });
    
    // Handle sidebar toggle responsiveness
    function adjustKanbanLayout() {
        const kanbanContainer = document.querySelector('.kanban-container');
        const kanbanColumns = document.querySelectorAll('.kanban-column');
        
        if (kanbanContainer && kanbanColumns.length > 0) {
            const containerStyles = window.getComputedStyle(kanbanContainer);
            const paddingLeft = parseFloat(containerStyles.paddingLeft) || 0;
            const paddingRight = parseFloat(containerStyles.paddingRight) || 0;
            const containerWidth = kanbanContainer.clientWidth; // excludes scrollbar
            const columnCount = kanbanColumns.length;
            const gap = 16; // 1rem gap between columns
            const availableWidth = containerWidth - paddingLeft - paddingRight - (gap * (columnCount - 1));
            const maxColumnWidth = Math.floor(availableWidth / columnCount);
            
            // Detect if sidebar is likely expanded by checking available width
            const isWideScreen = window.innerWidth > 1200;
            const hasLimitedSpace = availableWidth < 1000; // Sidebar expanded
            const hasMoreSpace = availableWidth >= 1000; // Sidebar collapsed
            
            let targetWidth;
            if (isWideScreen && hasLimitedSpace) {
                // When sidebar is expanded, use larger columns
                targetWidth = Math.min(maxColumnWidth, Math.max(280, Math.floor(availableWidth * 0.22)));
            } else if (hasMoreSpace) {
                // When sidebar is collapsed, use even larger columns
                targetWidth = Math.min(maxColumnWidth, Math.max(320, Math.floor(availableWidth * 0.25)));
            } else {
                // Fallback for smaller screens
                targetWidth = Math.min(maxColumnWidth, Math.max(260, Math.floor(availableWidth * 0.24)));
            }
            
            kanbanColumns.forEach(column => {
                column.style.minWidth = targetWidth + 'px';
                column.style.maxWidth = targetWidth + 'px';
            });
        }
    }
    
    // Initial adjustment
    adjustKanbanLayout();
    
    // Listen for window resize and sidebar toggle
    window.addEventListener('resize', adjustKanbanLayout);
    
    // Listen for sidebar toggle events (if using Bootstrap collapse)
    const sidebarToggle = document.querySelector('[data-bs-toggle="offcanvas"]');
    if (sidebarToggle) {
        sidebarToggle.addEventListener('click', function() {
            setTimeout(adjustKanbanLayout, 300); // Wait for animation to complete
        });
    }
    
    // Listen for sidebar collapse events
    const sidebar = document.querySelector('.offcanvas');
    if (sidebar) {
        sidebar.addEventListener('hidden.bs.offcanvas', adjustKanbanLayout);
        sidebar.addEventListener('shown.bs.offcanvas', adjustKanbanLayout);
    }
});

// =============================================
// DRAG AND DROP FUNCTIONALITY
// =============================================

let draggedTask = null;
let draggedFromColumn = null;

// Allow drop on column
function allowDrop(ev) {
    ev.preventDefault();
}

// Handle drag start
function dragTask(ev) {
    draggedTask = ev.target;
    draggedFromColumn = ev.target.closest('[data-column]').dataset.column;
    
    // Add visual feedback
    ev.target.style.opacity = '0.5';
    ev.target.style.transform = 'rotate(5deg)';
    
    // Set drag data
    ev.dataTransfer.setData('text/html', ev.target.outerHTML);
    ev.dataTransfer.effectAllowed = 'move';
    
    // Add dragging class to all columns for visual feedback
    document.querySelectorAll('[data-column]').forEach(column => {
        column.classList.add('drag-over-column');
    });
}

// Handle drag end
function dragEnd(ev) {
    // Reset visual feedback
    ev.target.style.opacity = '';
    ev.target.style.transform = '';
    
    // Remove dragging class from all columns
    document.querySelectorAll('[data-column]').forEach(column => {
        column.classList.remove('drag-over-column', 'drag-over');
    });
    
    draggedTask = null;
    draggedFromColumn = null;
}

// Handle drag enter
function dragEnter(ev) {
    ev.preventDefault();
    const column = ev.currentTarget;
    column.classList.add('drag-over');
}

// Handle drag leave
function dragLeave(ev) {
    const column = ev.currentTarget;
    // Only remove class if we're actually leaving the column (not just moving between child elements)
    if (!column.contains(ev.relatedTarget)) {
        column.classList.remove('drag-over');
    }
}

// Handle drop
function dropTask(ev) {
    ev.preventDefault();
    const targetColumn = ev.currentTarget;
    const targetColumnId = targetColumn.dataset.column;
    
    // Remove visual feedback
    targetColumn.classList.remove('drag-over');
    document.querySelectorAll('[data-column]').forEach(column => {
        column.classList.remove('drag-over-column');
    });
    
    // Don't drop on the same column
    if (draggedFromColumn === targetColumnId) {
        return;
    }
    
    // Move the task visually
    if (draggedTask && draggedTask.parentNode !== targetColumn) {
        // Clone the task to the new column
        const clonedTask = draggedTask.cloneNode(true);
        
        // Remove the original task
        draggedTask.remove();
        
        // Add the cloned task to the new column
        targetColumn.appendChild(clonedTask);
        
        // Update task count badges
        updateTaskCounts();
        
        // Show success message
        showTaskMovedMessage(draggedTask.dataset.taskTitle, draggedFromColumn, targetColumnId);
        
        // Try AJAX first, fallback to form submission if it fails
        updateTaskColumn(draggedTask.dataset.taskId, targetColumnId, draggedFromColumn, targetColumnId);
    }
}

// Update task count badges
function updateTaskCounts() {
    document.querySelectorAll('[data-column]').forEach(column => {
        const taskCount = column.querySelectorAll('.draggable-task').length;
        const badge = column.closest('.kanban-card').querySelector('.badge');
        if (badge) {
            badge.textContent = taskCount;
        }
    });
}

// Show task moved message
function showTaskMovedMessage(taskTitle, fromColumn, toColumn) {
    const columnNames = {
        'todo': 'To Do',
        'inprogress': 'In Progress',
        'review': 'Review',
        'done': 'Done'
    };
    
    // Create toast notification
    const toast = document.createElement('div');
    toast.className = 'toast align-items-center text-white bg-success border-0';
    toast.setAttribute('role', 'alert');
    toast.innerHTML = `
        <div class="d-flex">
            <div class="toast-body">
                <i class="bx bx-check-circle me-2"></i>
                Task "${taskTitle}" moved from ${columnNames[fromColumn]} to ${columnNames[toColumn]}<br>
                <small>Page will refresh in a moment...</small>
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    `;
    
    // Add to page
    let toastContainer = document.querySelector('.toast-container');
    if (!toastContainer) {
        toastContainer = document.createElement('div');
        toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3';
        document.body.appendChild(toastContainer);
    }
    
    toastContainer.appendChild(toast);
    
    // Show toast
    const bsToast = new bootstrap.Toast(toast);
    bsToast.show();
    
    // Remove toast after it's hidden
    toast.addEventListener('hidden.bs.toast', () => {
        toast.remove();
    });
}

// Update task column via AJAX with fallback
function updateTaskColumn(taskId, newColumnId, fromColumn, toColumn) {
    // Get CSRF token
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
    
    if (!csrfToken) {
        console.warn('CSRF token not found, using fallback method');
        // Fallback: Just refresh the page after a delay
        setTimeout(() => {
            window.location.reload();
        }, 2000);
        return;
    }
    
    // Prepare JSON data
    const requestData = {
        _token: csrfToken,
        task_id: taskId,
        new_column: newColumnId
    };
    
    // Debug logging
    console.log('Sending AJAX request with data:', {
        taskId: taskId,
        newColumnId: newColumnId,
        csrfToken: csrfToken,
        url: '/kanban/update-task-column',
        taskIdType: typeof taskId,
        taskIdValue: taskId
    });
    
    // Set a timeout for the AJAX request
    const timeoutId = setTimeout(() => {
        console.warn('AJAX request timed out, using fallback method');
        showErrorMessage('Request timed out. Refreshing page...');
        setTimeout(() => {
            window.location.reload();
        }, 1000);
    }, 3000); // 3 second timeout
    
    // Send AJAX request
    fetch('/kanban/update-task-column', {
        method: 'POST',
        body: JSON.stringify(requestData),
        headers: {
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': csrfToken
        },
        credentials: 'same-origin'
    })
    .then(response => {
        console.log('Response status:', response.status);
        console.log('Response headers:', response.headers);
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        return response.json();
    })
    .then(data => {
        clearTimeout(timeoutId); // Clear the timeout since we got a response
        console.log('Response data:', data);
        if (data.success) {
            console.log('Task column updated successfully');
            // Refresh the page after successful update
            setTimeout(() => {
                window.location.reload();
            }, 1500); // Wait 1.5 seconds to show the success message
        } else {
            console.error('Error updating task column:', data.message);
            // Fallback: use form submission
            showErrorMessage('Server error: ' + (data.message || 'Unknown error') + '. Using fallback method...');
            setTimeout(() => {
                submitTaskMoveForm(taskId, newColumnId);
            }, 1000);
        }
    })
    .catch(error => {
        clearTimeout(timeoutId); // Clear the timeout since we got an error
        console.error('Error details:', error);
        console.error('Error message:', error.message);
        showErrorMessage('Network error: ' + error.message + '. Using fallback method...');
        // Fallback: use form submission
        setTimeout(() => {
            submitTaskMoveForm(taskId, newColumnId);
        }, 1000);
    });
}

// Show error message
function showErrorMessage(message) {
    const toast = document.createElement('div');
    toast.className = 'toast align-items-center text-white bg-danger border-0';
    toast.setAttribute('role', 'alert');
    toast.innerHTML = `
        <div class="d-flex">
            <div class="toast-body">
                <i class="bx bx-error-circle me-2"></i>
                ${message}
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    `;
    
    let toastContainer = document.querySelector('.toast-container');
    if (!toastContainer) {
        toastContainer = document.createElement('div');
        toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3';
        document.body.appendChild(toastContainer);
    }
    
    toastContainer.appendChild(toast);
    
    const bsToast = new bootstrap.Toast(toast);
    bsToast.show();
    
    toast.addEventListener('hidden.bs.toast', () => {
        toast.remove();
    });
}

// Fallback method using form submission
function submitTaskMoveForm(taskId, newColumnId) {
    // Create a hidden form
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '/kanban/update-task-column';
    form.style.display = 'none';
    
    // Add CSRF token
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
    if (csrfToken) {
        const csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = '_token';
        csrfInput.value = csrfToken;
        form.appendChild(csrfInput);
    }
    
    // Add task data
    const taskIdInput = document.createElement('input');
    taskIdInput.type = 'hidden';
    taskIdInput.name = 'task_id';
    taskIdInput.value = taskId;
    form.appendChild(taskIdInput);
    
    const columnInput = document.createElement('input');
    columnInput.type = 'hidden';
    columnInput.name = 'new_column';
    columnInput.value = newColumnId;
    form.appendChild(columnInput);
    
    // Submit the form
    document.body.appendChild(form);
    form.submit();
}

// Global variable to store current task data
let currentTaskData = null;

// Show task details modal
function showTaskModal(taskElement) {
    // Prevent modal from opening during drag
    if (taskElement.classList.contains('dragging')) {
        return;
    }
    
    // Get task data from data attributes
    const taskId = taskElement.getAttribute('data-task-id');
    const taskTitle = taskElement.getAttribute('data-task-title');
    const taskDescription = taskElement.getAttribute('data-task-description');
    const taskPriority = taskElement.getAttribute('data-task-priority');
    const taskDueDate = taskElement.getAttribute('data-task-due-date');
    const taskAssignee = taskElement.getAttribute('data-task-assignee');
    
    // Store current task data globally
    currentTaskData = {
        id: taskId,
        title: taskTitle,
        description: taskDescription,
        priority: taskPriority,
        dueDate: taskDueDate,
        assignee: taskAssignee
    };
    
    // Find the column name for status
    const columnElement = taskElement.closest('[data-column]');
    const columnId = columnElement ? columnElement.getAttribute('data-column') : '';
    
    // Map column IDs to status names based on kanban columns
    const statusMap = {
        '1': 'To Do',
        '2': 'In Progress', 
        '3': 'Review',
        '4': 'Done'
    };
    
    // Get the column title from the column header for more accurate status
    const columnContainer = columnElement ? columnElement.closest('.kanban-column-container') : null;
    const columnHeader = columnContainer ? columnContainer.querySelector('.card-title') : null;
    const columnTitle = columnHeader ? columnHeader.textContent.trim() : '';
    
    // Debug logging
    console.log('Column ID:', columnId);
    console.log('Column Title:', columnTitle);
    console.log('Column Header:', columnHeader);
    
    // Update modal content
    document.getElementById('modalTaskTitle').textContent = taskTitle;
    document.getElementById('modalTaskDescription').textContent = taskDescription || 'No description provided';
    
    // Update priority with flag icon and color
    const priorityElement = document.getElementById('modalTaskPriority');
    priorityElement.className = `badge d-flex align-items-center justify-content-center ${getPriorityColor(taskPriority)}`;
    priorityElement.style.width = '24px';
    priorityElement.style.height = '24px';
    priorityElement.style.padding = '0';
    priorityElement.innerHTML = '<i class="bx bx-flag" style="font-size: 0.8rem;"></i>';
    
    document.getElementById('modalTaskDueDate').textContent = taskDueDate ? new Date(taskDueDate).toLocaleDateString() : 'No due date';
    document.getElementById('modalTaskAssignee').textContent = taskAssignee || 'Unassigned';
    
    // Use column title if available, otherwise use status map
    let taskStatus = 'Unknown';
    
    if (columnTitle && columnTitle !== '') {
        // Extract the main status from column title (remove task counts if present)
        // e.g., "To Do (3)" -> "To Do", "In Progress (1)" -> "In Progress"
        taskStatus = columnTitle.replace(/\s*\(\d+\)\s*$/, '').trim();
    } else if (statusMap[columnId]) {
        taskStatus = statusMap[columnId];
    }
    
    // Ensure no numbers are displayed in status - only clean text
    taskStatus = taskStatus.replace(/\d+/g, '').trim();
    
    console.log('Final Status:', taskStatus);
    document.getElementById('modalTaskStatus').textContent = taskStatus;
    
    // Show the modal
    const modal = new bootstrap.Modal(document.getElementById('taskDetailsModal'));
    modal.show();
}

// Open edit task modal and fetch task data
function openEditTaskModal() {
    if (!currentTaskData || !currentTaskData.id) {
        console.error('No task data available for editing');
        return;
    }
    
    // Close the current task details modal
    const taskModal = bootstrap.Modal.getInstance(document.getElementById('taskDetailsModal'));
    if (taskModal) {
        taskModal.hide();
    }
    
    // Fetch detailed task data from server
    fetch(`/tasks/${currentTaskData.id}`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Populate the edit form with task data
            populateEditForm(data.task);
            
            // Show the edit modal
            const editModal = new bootstrap.Modal(document.getElementById('editTaskModal'));
            editModal.show();
        } else {
            console.error('Failed to fetch task data:', data.message);
            alert('Failed to load task data for editing');
        }
    })
    .catch(error => {
        console.error('Error fetching task data:', error);
        alert('Error loading task data for editing');
    });
}

// Populate edit form with task data
function populateEditForm(task) {
    document.getElementById('editTaskTitle').value = task.title || '';
    document.getElementById('editTaskDescription').value = task.description || '';
    document.getElementById('editTaskPriority').value = task.priority || 'medium';
    document.getElementById('editTaskStatus').value = task.status || 'todo';
    document.getElementById('editTaskDueDate').value = task.due_date || '';
    
    // Set assignee
    const assigneeSelect = document.getElementById('editTaskAssignee');
    if (task.assigned_to_id) {
        assigneeSelect.value = `user-${task.assigned_to_id}`;
    } else {
        assigneeSelect.value = '';
    }
    
    // Store task ID for form submission
    document.getElementById('editTaskForm').setAttribute('data-task-id', task.id);
}

// Handle edit task form submission
document.addEventListener('DOMContentLoaded', function() {
    const editTaskForm = document.getElementById('editTaskForm');
    if (editTaskForm) {
        editTaskForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const taskId = this.getAttribute('data-task-id');
            if (!taskId) {
                alert('Task ID not found');
                return;
            }
            
            // Get form data
            const formData = new FormData(this);
            const taskData = {
                title: formData.get('title'),
                description: formData.get('description'),
                priority: formData.get('priority'),
                assignee: formData.get('assignee'),
                dueDate: formData.get('dueDate'),
                status: formData.get('status')
            };
            
            // Show loading state
            const submitBtn = this.querySelector('button[type="submit"]');
            const originalText = submitBtn.textContent;
            submitBtn.textContent = 'Updating...';
            submitBtn.disabled = true;
            
            // Submit the update
            fetch(`/tasks/${taskId}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify(taskData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Close the modal
                    const editModal = bootstrap.Modal.getInstance(document.getElementById('editTaskModal'));
                    if (editModal) {
                        editModal.hide();
                    }
                    
                    // Show success message
                    alert('Task updated successfully!');
                    
                    // Reload the page to reflect changes
                    window.location.reload();
                } else {
                    alert('Failed to update task: ' + (data.message || 'Unknown error'));
                }
            })
            .catch(error => {
                console.error('Error updating task:', error);
                alert('Error updating task. Please try again.');
            })
            .finally(() => {
                // Reset button state
                submitBtn.textContent = originalText;
                submitBtn.disabled = false;
            });
        });
    }
});

// Get priority color class
function getPriorityColor(priority) {
    const colors = {
        'low': 'bg-success',
        'medium': 'bg-warning',
        'high': 'bg-danger',
        'urgent': 'bg-danger'
    };
    return colors[priority] || 'bg-warning';
}

// Delete task function
function deleteTask(deleteLink) {
    const taskId = deleteLink.getAttribute('data-task-id');
    const taskCard = deleteLink.closest('.draggable-task');
    const taskTitle = taskCard.querySelector('.card-title').textContent;
    
    if (!taskId) {
        showErrorMessage('Task ID not found');
        return;
    }
    
    // Show confirmation dialog
    if (confirm(`Are you sure you want to delete "${taskTitle}"? This action cannot be undone.`)) {
        // Show loading state
        deleteLink.innerHTML = '<i class="bx bx-loader-alt bx-spin"></i> Deleting...';
        deleteLink.style.pointerEvents = 'none';
        
        // Make AJAX request to delete task
        fetch('{{ route("kanban.delete-task") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json'
            },
            credentials: 'same-origin',
            body: JSON.stringify({
                task_id: taskId
            })
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                // Remove task card from DOM
                taskCard.remove();
                showSuccessMessage('Task deleted successfully');
                
                // Refresh page after a short delay to update task counts
                setTimeout(() => {
                    window.location.reload();
                }, 1000);
            } else {
                throw new Error(data.message || 'Failed to delete task');
            }
        })
        .catch(error => {
            console.error('Delete task error:', error);
            showErrorMessage('Failed to delete task: ' + error.message);
            
            // Reset button state
            deleteLink.innerHTML = 'Delete';
            deleteLink.style.pointerEvents = 'auto';
        });
    }
}
</script>

<style>
/* Drag and Drop Styles */
.draggable-task {
    cursor: move;
    transition: all 0.2s ease;
}

.draggable-task:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

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

/* Column drop zones */
[data-column] {
    transition: all 0.3s ease;
    min-height: 200px;
}

[data-column].drag-over-column {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
    border: 2px dashed var(--bs-primary);
    border-radius: 8px;
}

[data-column].drag-over {
    background-color: rgba(var(--bs-success-rgb), 0.1);
    border: 2px solid var(--bs-success);
    border-radius: 8px;
    transform: scale(1.02);
}

/* Drag placeholder */
.draggable-task.dragging {
    opacity: 0.5;
    transform: rotate(5deg) scale(1.05);
    z-index: 1000;
    position: relative;
}

/* Toast container */
.toast-container {
    z-index: 9999;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .draggable-task {
        touch-action: none;
    }
    
    [data-column] {
        min-height: 150px;
    }
}

/* Accessibility improvements */
.draggable-task:focus {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Animation for task movement */
@keyframes taskMove {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.task-moved {
    animation: taskMove 0.3s ease;
}

/* Fixed height kanban columns with scrolling */
.kanban-column-container {
    height: 600px; /* Fixed height for the entire column */
    display: flex;
    flex-direction: column;
    width: 280px; /* Fixed width for columns */
    min-width: 280px;
    max-width: 280px;
}

.kanban-tasks-container {
    flex: 1;
    overflow-y: auto;
    max-height: calc(600px - 60px); /* Subtract header height */
    padding: 0.5rem;
}

/* Hide scrollbar but keep functionality */
.hide-scrollbar {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.hide-scrollbar::-webkit-scrollbar {
    display: none; /* WebKit */
}

/* Ensure tasks container has proper spacing */
.kanban-tasks-container .task-card:last-child {
    margin-bottom: 0;
}

/* Consistent task card sizing */
.task-card {
    height: 140px; /* Fixed height for all task cards */
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.task-card .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.task-card .card-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.8rem; /* Ensure consistent height for 2 lines */
}

.task-card .card-text {
    font-size: 0.8rem;
    line-height: 1.3;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.3rem; /* Ensure consistent height for 1 line */
    flex: 1;
}

.task-card .d-flex.align-items-center.justify-content-between {
    margin-top: auto; /* Push to bottom */
    font-size: 0.75rem;
}

/* Responsive height and width adjustments */
@media (max-width: 1200px) {
    .kanban-column-container {
        height: 500px;
        width: 260px;
        min-width: 260px;
        max-width: 260px;
    }
    
    .kanban-tasks-container {
        max-height: calc(500px - 60px);
    }
}

@media (max-width: 768px) {
    .kanban-column-container {
        height: 400px;
        width: 240px;
        min-width: 240px;
        max-width: 240px;
    }
    
    .kanban-tasks-container {
        max-height: calc(400px - 60px);
    }
}

@media (max-width: 576px) {
    .kanban-column-container {
        width: 220px;
        min-width: 220px;
        max-width: 220px;
    }
}

/* Task Details Modal Status Fix */
#modalTaskStatus {
    word-wrap: break-word;
    white-space: nowrap;
    overflow: visible;
    min-width: 80px;
}

/* Ensure modal has enough space */
#taskDetailsModal .modal-dialog {
    max-width: 800px;
}

#taskDetailsModal .card {
    min-height: auto;
}
</style>