<?php
    $columns = [
        \App\Models\Task\Task::STATUS_PENDING => ['label' => 'Bekliyor', 'dot' => '#f59e0b', 'bg' => '#fffbeb', 'icon' => 'fa-hourglass-half'],
        \App\Models\Task\Task::STATUS_IN_PROGRESS => ['label' => 'Devam Ediyor', 'dot' => '#4f46e5', 'bg' => '#eef2ff', 'icon' => 'fa-bolt'],
        \App\Models\Task\Task::STATUS_COMPLETED => ['label' => 'Tamamlandı', 'dot' => '#16a34a', 'bg' => '#f0fdf4', 'icon' => 'fa-circle-check'],
    ];
?>

<div class="tk-kanban">
    <?php $__currentLoopData = $columns; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $statusKey => $col): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <section class="tk-col" data-status="<?php echo e($statusKey); ?>">
            <header class="tk-col-head" style="--col-bg: <?php echo e($col['bg']); ?>; --col-dot: <?php echo e($col['dot']); ?>;">
                <span class="tk-col-dot"></span>
                <h6><?php echo e($col['label']); ?></h6>
                <span class="tk-col-count"><?php echo e($kanban[$statusKey]->count()); ?></span>
            </header>

            <div class="tk-col-body" data-status="<?php echo e($statusKey); ?>">
                <?php $__empty_1 = true; $__currentLoopData = $kanban[$statusKey]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $task): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <article class="tk-card <?php echo e($task->isOverdue() ? 'over' : ''); ?> <?php echo e($statusKey === 'completed' ? 'done' : ''); ?>"
                             data-id="<?php echo e($task->id); ?>"
                             data-qv="<?php echo e(route('agency.tasks.quick-view', $task)); ?>"
                             style="--pri: <?php echo e($task->priorityMeta()['color']); ?>;">
                        <div class="tk-card-top">
                            <span class="tk-badge" style="background: <?php echo e($task->priorityMeta()['color']); ?>18; color: <?php echo e($task->priorityMeta()['color']); ?>;">
                                <?php echo e($task->priorityMeta()['label']); ?>

                            </span>
                            <?php if($task->is_auto): ?>
                                <span class="tk-auto-badge" title="Sistem tarafından oluşturuldu"><i class="fas fa-robot"></i> Otomatik</span>
                            <?php endif; ?>
                        </div>

                        <h5 class="tk-card-title"><?php echo e($task->title); ?></h5>

                        <?php if($task->relations->isNotEmpty()): ?>
                            <div class="tk-card-rels">
                                <?php $__currentLoopData = $task->relations->take(2); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $rel): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <span class="tk-relchip" data-rel-qv="<?php echo e($rel->quickViewUrl()); ?>" title="<?php echo e($rel->label()); ?>">
                                        <i class="fas <?php echo e($rel->meta()['icon']); ?>"></i><?php echo e(\Illuminate\Support\Str::limit($rel->label(), 26)); ?>

                                    </span>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                <?php if($task->relations->count() > 2): ?>
                                    <span class="tk-relchip">+<?php echo e($task->relations->count() - 2); ?></span>
                                <?php endif; ?>
                            </div>
                        <?php endif; ?>

                        <?php if($task->assignees->isNotEmpty()): ?>
                            <div class="tk-people tk-card-people">
                                <?php $__currentLoopData = $task->assignees->take(2); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $user): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <span class="tk-person"><span class="tk-avatar"><?php echo e($user->initials); ?></span><?php echo e($user->full_name); ?></span>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                <?php if($task->assignees->count() > 2): ?>
                                    <span class="tk-person more" title="<?php echo e($task->assignees->skip(2)->pluck('full_name')->implode(', ')); ?>">+<?php echo e($task->assignees->count() - 2); ?> kişi</span>
                                <?php endif; ?>
                            </div>
                        <?php endif; ?>

                        <div class="tk-card-foot">
                            <?php if($task->due_date): ?>
                                <span class="tk-due <?php echo e($task->isOverdue() ? 'over' : ''); ?>">
                                    <i class="fas <?php echo e($task->isOverdue() ? 'fa-fire' : 'fa-clock'); ?>"></i>
                                    <?php echo e($task->due_date->translatedFormat('d M, H:i')); ?>

                                </span>
                            <?php else: ?>
                                <span></span>
                            <?php endif; ?>

                            <span class="d-inline-flex align-items-center gap-2">
                                <?php if(($task->comments_count ?? 0) > 0): ?>
                                    <span class="tk-due" title="<?php echo e($task->comments_count); ?> not/güncelleme"><i class="far fa-comment"></i> <?php echo e($task->comments_count); ?></span>
                                <?php endif; ?>
                                <?php if($task->completed_at): ?>
                                    <span class="tk-due"><i class="fas fa-check"></i> <?php echo e($task->completed_at->translatedFormat('d M')); ?></span>
                                <?php endif; ?>
                            </span>
                        </div>
                    </article>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                    <div class="tk-col-empty">
                        <i class="fas <?php echo e($col['icon']); ?>"></i>
                        <span>Görev yok</span>
                    </div>
                <?php endif; ?>
            </div>
        </section>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>

<?php $__env->startPush('styles'); ?>
<style>
    .tk-kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
    .tk-col { background: #f1f5f9; border: 1px solid #e9edf3; border-radius: 16px; overflow: hidden; }
    .tk-col-head {
        display: flex; align-items: center; gap: .55rem; padding: .8rem 1rem;
        background: var(--col-bg); border-bottom: 1px solid #e9edf3;
    }
    .tk-col-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--col-dot); box-shadow: 0 0 0 4px color-mix(in srgb, var(--col-dot) 18%, transparent); }
    .tk-col-head h6 { margin: 0; font-size: .84rem; font-weight: 800; color: #1e293b; letter-spacing: -0.01em; }
    .tk-col-count { margin-left: auto; font-size: .72rem; font-weight: 800; color: #64748b; background: #fff; border: 1px solid #e2e8f0; padding: .1rem .55rem; border-radius: 999px; }

    .tk-col-body { padding: .7rem; display: flex; flex-direction: column; gap: .6rem; min-height: 180px; max-height: calc(100vh - 320px); overflow-y: auto; }
    .tk-col-body::-webkit-scrollbar { width: 5px; }
    .tk-col-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

    .tk-card {
        position: relative; background: #fff; border: 1px solid #e9edf3; border-left: 4px solid var(--pri, #94a3b8);
        border-radius: 12px; padding: .75rem .85rem; cursor: pointer;
        transition: transform .15s ease, box-shadow .15s ease;
    }
    .tk-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(15,23,42,.2); }
    .tk-card.over { background: #fffafa; border-color: #fecaca; border-left-color: #ef4444; }
    .tk-card.done { opacity: .72; }
    .tk-card.done .tk-card-title { text-decoration: line-through; text-decoration-color: #cbd5e1; }

    .tk-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .45rem; }
    .tk-card-title { font-size: .86rem; font-weight: 700; color: #0f172a; line-height: 1.35; margin: 0 0 .5rem; word-break: break-word; }
    .tk-card-rels { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .55rem; }
    .tk-card-people { margin-bottom: .55rem; }
    .tk-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

    /* Sürükleme durumları */
    .tk-card.sortable-ghost { opacity: .35; background: var(--tk-soft, #fef3c7); border-style: dashed; }
    .tk-card.sortable-drag { box-shadow: 0 18px 40px -12px rgba(15,23,42,.35); transform: rotate(2deg); }

    .tk-col-empty {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
        border: 2px dashed #e2e8f0; border-radius: 12px; padding: 1.6rem .5rem; color: #b6c2d2;
        font-size: .78rem; font-weight: 700;
    }
    .tk-col-empty i { font-size: 1.2rem; opacity: .6; }

    @media (max-width: 992px) { .tk-kanban { grid-template-columns: 1fr; } .tk-col-body { max-height: none; } }
</style>
<?php $__env->stopPush(); ?>

<?php $__env->startPush('scripts'); ?>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
<script>
(function () {
    const REORDER_URL = "<?php echo e(route('agency.tasks.reorder')); ?>";
    const CSRF = document.querySelector('meta[name="csrf-token"]')?.content;
    let dragging = false;

    function sendColumn(colEl) {
        const ids = [...colEl.querySelectorAll('.tk-card')].map(c => c.dataset.id);
        return fetch(REORDER_URL, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'X-Requested-With': 'XMLHttpRequest' },
            body: JSON.stringify({ status: colEl.dataset.status, ordered_ids: ids })
        });
    }

    function refreshCounts() {
        document.querySelectorAll('.tk-col').forEach(col => {
            const n = col.querySelectorAll('.tk-card').length;
            col.querySelector('.tk-col-count').textContent = n;
        });
    }

    document.querySelectorAll('.tk-col-body').forEach(colEl => {
        new Sortable(colEl, {
            group: 'tk-kanban',
            animation: 180,
            ghostClass: 'sortable-ghost',
            dragClass: 'sortable-drag',
            onStart: () => { dragging = true; },
            onEnd: (evt) => {
                setTimeout(() => { dragging = false; }, 80);
                const jobs = [sendColumn(evt.to)];
                if (evt.from !== evt.to) jobs.push(sendColumn(evt.from));
                Promise.all(jobs)
                    .then(rs => { if (rs.some(r => !r.ok)) throw new Error(); refreshCounts(); })
                    .catch(() => location.reload());

                // Tamamlandı kolonuna taşınan kart görsel olarak işaretlensin
                evt.item.classList.toggle('done', evt.to.dataset.status === 'completed');
                evt.item.classList.remove('over');
            }
        });
    });

    // Kart tıklaması → quick-view (sürükleme sonrası tetiklenmesin)
    document.querySelector('.tk-kanban').addEventListener('click', (e) => {
        if (dragging) return;
        const chip = e.target.closest('[data-rel-qv]');
        if (chip) {
            e.stopPropagation();
            if (chip.dataset.relQv && typeof openQuickView === 'function') openQuickView(chip.dataset.relQv);
            return;
        }
        const card = e.target.closest('.tk-card');
        if (card && typeof openQuickView === 'function') openQuickView(card.dataset.qv);
    });
})();
</script>
<?php $__env->stopPush(); ?>
<?php /**PATH C:\xampp\htdocs\acente\resources\views/agency/tasks/partials/kanban.blade.php ENDPATH**/ ?>