@props([
    'id' => 'kanban_' . Str::random(8),
    'columns' => [], // ['Pendiente' => $tasks1, 'En Proceso' => $tasks2]
])

@pushonce('css')
<style>
    .kanban-board {
        display: flex;
        overflow-x: auto;
        padding: 10px 0;
        gap: 1rem;
        align-items: flex-start;
    }
    .kanban-column {
        min-width: 300px;
        max-width: 300px;
        background: #ebedf0;
        border-radius: 8px;
        padding: 10px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .kanban-column-header {
        padding: 10px;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 0.9rem;
        color: #4a5568;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .kanban-tasks {
        min-height: 100px;
    }
    .kanban-card {
        background: white;
        border-radius: 6px;
        padding: 12px;
        margin-bottom: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        cursor: grab;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .kanban-card:hover {
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }
    .kanban-card.sortable-ghost {
        opacity: 0.4;
        background: #edf2f7;
    }
    .kanban-card-title {
        font-weight: 600;
        margin-bottom: 4px;
        font-size: 0.95rem;
    }
    .kanban-card-desc {
        color: #718096;
        font-size: 0.85rem;
    }
</style>
@endpushonce

<div id="{{ $id }}" class="kanban-board">
    @foreach($columns as $columnName => $tasks)
        <div class="kanban-column" data-status="{{ $columnName }}">
            <div class="kanban-column-header">
                {{ $columnName }}
                <span class="badge badge-pill badge-secondary">{{ count($tasks) }}</span>
            </div>
            <div class="kanban-tasks" data-column-id="{{ $columnName }}">
                @foreach($tasks as $task)
                    <div class="kanban-card" data-id="{{ $task['id'] }}">
                        <div class="kanban-card-title">{{ $task['title'] }}</div>
                        @if(isset($task['description']))
                            <div class="kanban-card-desc">{{ $task['description'] }}</div>
                        @endif
                        @if(isset($task['badge']))
                            <span class="badge badge-{{ $task['badge_color'] ?? 'primary' }} mt-2">{{ $task['badge'] }}</span>
                        @endif
                    </div>
                @endforeach
            </div>
        </div>
    @endforeach
</div>

@pushonce('js')
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
@endpushonce

@push('js')
<script>
$(function() {
    const kanbanId = '{{ $id }}';
    const columns = document.querySelectorAll(`#${kanbanId} .kanban-tasks`);

    columns.forEach(column => {
        new Sortable(column, {
            group: 'kanban', // Permite mover entre columnas
            animation: 150,
            ghostClass: 'sortable-ghost',
            onEnd: function (evt) {
                const taskId = evt.item.getAttribute('data-id');
                const newStatus = evt.to.getAttribute('data-column-id');
                const oldStatus = evt.from.getAttribute('data-column-id');

                if (newStatus !== oldStatus) {
                    console.log(`Tarea ${taskId} movida de ${oldStatus} a ${newStatus}`);
                    // Disparar evento personalizado para que el desarrollador pueda capturarlo con JS o Livewire
                    const event = new CustomEvent('kanban-task-moved', {
                        detail: { taskId, newStatus, oldStatus }
                    });
                    document.getElementById(kanbanId).dispatchEvent(event);
                }
            }
        });
    });
});
</script>
@endpush