{{-- Görev quick-view (drawer içeriği — layout'suz partial) --}}
@php
    $statusMeta = $task->statusMeta();
    $priorityMeta = $task->priorityMeta();
    $isOpen = in_array($task->status, ['pending', 'in_progress'], true);
    $isAwaiting = $task->status === \App\Models\Task\Task::STATUS_AWAITING_APPROVAL;
    $isArchived = $task->isArchived();
    $canArchive = $canAssign || $task->created_by === auth()->id();
    $canApprove = $canApprove ?? false;
    $checklist = $task->checklistItems;
    $checklistDone = $checklist->whereNotNull('done_at')->count();
    $uid = 'tqv' . $task->id;
@endphp

<x-quick-view.layout class="tk-qv" id="{{ $uid }}">
    <x-quick-view.header>
        <x-slot:avatar class="tk-qv-av">
            <i class="fas {{ $task->is_auto ? 'fa-robot' : 'fa-list-check' }}"></i>
        </x-slot:avatar>

        <x-slot:title>
            {{-- Görev başlığı gerçek bir kolon → ortak tıkla-düzenle başlık kalıbı --}}
            <x-quick-view.editable-title class="tk-qv-title" data-role="title" field="title"
                :url="route('agency.tasks.update-field', $task)" :value="$task->title"
                :required="true" :maxlength="255" placeholder="Görev başlığı" />
        </x-slot:title>

        <x-slot:subtitle>
            <span class="tk-badge" data-role="status-badge" style="background: {{ $statusMeta['color'] }}18; color: {{ $statusMeta['color'] }};">{{ $statusMeta['label'] }}</span>
            <span class="tk-badge" style="background: {{ $priorityMeta['color'] }}18; color: {{ $priorityMeta['color'] }};">{{ $priorityMeta['label'] }} Öncelik</span>
            @if($task->is_auto)
                <span class="tk-auto-badge"><i class="fas fa-robot"></i> Otomatik Görev</span>
            @endif
            @if($isArchived)
                <span class="tk-badge" style="background:#f1f5f9; color:#64748b;"><i class="fas fa-box-archive"></i> Arşivde</span>
            @endif
            <span class="tk-due {{ $task->isOverdue() ? 'over' : '' }}" data-role="due-chip"
                  @if(! $task->due_date) hidden @endif>
                <i class="fas {{ $task->isOverdue() ? 'fa-fire' : 'fa-clock' }}"></i>
                <span data-role="due-chip-text">{{ $task->dueLabel('d M Y') }}</span>
            </span>
        </x-slot:subtitle>

        @if(($canTouch && $isOpen && ! $isArchived) || $canArchive)
            <x-slot:actions>
                @if($isArchived)
                    @if($canArchive)
                        <button type="button" class="tk-qv-unarchive" data-role="unarchive-btn">
                            <i class="fas fa-rotate-left"></i> Arşivden Çıkar
                        </button>
                    @endif
                @else
                    @if($canTouch && $isOpen)
                        <button type="button" class="tk-qv-complete" data-role="complete-btn">
                            <i class="fas fa-check"></i> Tamamla
                        </button>
                    @endif
                    @if($canArchive)
                        <button type="button" class="qv-action-btn" data-role="archive-btn" title="Arşive Al">
                            <i class="fas fa-box-archive"></i>
                        </button>
                    @endif
                @endif
            </x-slot:actions>
        @endif

        <x-slot:tabs>
            <x-quick-view.tab id="detay" label="Detay" icon="fas fa-circle-info" :active="true" />
        </x-slot:tabs>
    </x-quick-view.header>

    <x-quick-view.content>
        <div id="qv-tab-detay" class="qv-tab-panel active">

            {{-- ── ONAY BANDI: atanan tamamladı, atayanın onayı bekleniyor ── --}}
            @if($isAwaiting)
                <div class="tk-qv-approval">
                    <div class="tk-qv-approval-ic"><i class="fas fa-user-check"></i></div>
                    <div class="tk-qv-approval-tx">
                        <b>Tamamlama onayı bekleniyor</b>
                        <span>
                            {{ $task->submitter?->full_name ?? 'Atanan kişi' }},
                            {{ $task->submitted_at?->translatedFormat('d M Y H:i') ?? '' }} tarihinde görevi tamamlandı olarak işaretledi.
                            {{ $canApprove ? 'Kontrol edip onaylayın veya reddedin.' : 'Görevi atayan kişinin onayı bekleniyor.' }}
                        </span>
                        @if($canApprove)
                            <div class="tk-qv-approval-actions">
                                <button type="button" class="tk-qv-approve" data-role="approve-btn"><i class="fas fa-check"></i> Onayla ve Tamamla</button>
                                <button type="button" class="tk-qv-reject" data-role="reject-btn"><i class="fas fa-rotate-left"></i> Reddet</button>
                            </div>
                            <div class="tk-qv-reject-box" data-role="reject-box" hidden>
                                <textarea class="tk-qv-input" rows="2" maxlength="1000" data-role="reject-reason"
                                          placeholder="Ret gerekçesi (isteğe bağlı) — atanan kişi zaman tünelinde görecek"></textarea>
                                <button type="button" class="tk-qv-reject solid" data-role="reject-confirm"><i class="fas fa-paper-plane"></i> Reddet ve Geri Gönder</button>
                            </div>
                        @endif
                    </div>
                </div>
            @endif

            <div class="tk-qv-grid">
                <x-quick-view.sidebar>

                    <div class="tk-qv-block">
                        <label class="tk-qv-label">Durum</label>
                        <div class="tk-qv-statuses" data-role="statuses">
                            @foreach(\App\Models\Task\Task::STATUSES as $key => $meta)
                                <button type="button"
                                        class="tk-qv-status {{ $task->status === $key ? 'on' : '' }}"
                                        data-status="{{ $key }}"
                                        style="--sc: {{ $meta['color'] }};"
                                        {{ $canTouch ? '' : 'disabled' }}>
                                    {{ $meta['label'] }}
                                </button>
                            @endforeach
                        </div>
                    </div>

                    <div class="tk-qv-block">
                        <label class="tk-qv-label">Öncelik</label>
                        <select class="tk-qv-input" data-field="priority" {{ $canTouch ? '' : 'disabled' }}>
                            @foreach(\App\Models\Task\Task::PRIORITIES as $key => $meta)
                                <option value="{{ $key }}" {{ $task->priority === $key ? 'selected' : '' }}>{{ $meta['label'] }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="tk-qv-block">
                        <label class="tk-qv-label">Son Tarih <small>(saat isteğe bağlı)</small></label>
                        <div class="tk-qv-due">
                            <input type="date" class="tk-qv-input" data-role="due-date"
                                   value="{{ $task->due_date?->format('Y-m-d') }}" {{ $canTouch ? '' : 'disabled' }}>
                            <input type="time" class="tk-qv-input tk-qv-due-time" data-role="due-time"
                                   value="{{ $task->due_has_time ? $task->due_date?->format('H:i') : '' }}"
                                   title="Boş bırakırsanız görev gün sonuna kadar geçerli olur"
                                   {{ $canTouch && $task->due_date ? '' : 'disabled' }}>
                        </div>
                    </div>

                    <div class="tk-qv-block">
                        <div class="d-flex align-items-center justify-content-between mb-1">
                            <label class="tk-qv-label mb-0">Atananlar</label>
                            @if($canAssign)
                                <button type="button" class="tk-qv-mini" data-role="edit-assignees"><i class="fas fa-pen"></i> Düzenle</button>
                            @endif
                        </div>

                        <div class="tk-qv-people" data-role="assignee-list">
                            @forelse($task->assignees as $user)
                                <div class="tk-qv-person">
                                    <span class="tk-avatar">{{ $user->initials }}</span>
                                    <span>{{ $user->full_name }}</span>
                                </div>
                            @empty
                                <span class="text-muted" style="font-size:.8rem;">Atanan yok</span>
                            @endforelse
                        </div>

                        @if($canAssign)
                            <div class="tk-qv-assignee-editor" data-role="assignee-editor" style="display:none;">
                                @foreach($staffUsers->where('id', '!=', auth()->id()) as $su)
                                    <label class="tk-qv-checkchip">
                                        <input type="checkbox" value="{{ $su->id }}" {{ $task->assignees->contains('id', $su->id) ? 'checked' : '' }}>
                                        <span>{{ $su->full_name }}</span>
                                    </label>
                                @endforeach
                                <button type="button" class="tk-qv-mini solid" data-role="save-assignees"><i class="fas fa-check"></i> Kaydet</button>
                            </div>
                        @endif
                    </div>

                    <div class="tk-qv-block tk-qv-meta">
                        <div>
                            <label class="tk-qv-label">Oluşturan</label>
                            <span>{{ $task->is_auto ? 'Sistem (otomatik)' : ($task->creator?->full_name ?? '—') }}</span>
                        </div>
                        <div>
                            <label class="tk-qv-label">Onay Şartı</label>
                            <span>
                                @if($task->requires_approval)
                                    <i class="fas fa-user-check" style="color:#0ea5e9;"></i> Atayanın onayı gerekir
                                @else
                                    <i class="fas fa-bolt" style="color:#16a34a;"></i> Onaysız tamamlanabilir
                                @endif
                            </span>
                        </div>
                        <div>
                            <label class="tk-qv-label">Oluşturulma</label>
                            <span>{{ $task->created_at->translatedFormat('d M Y, H:i') }}</span>
                        </div>
                        @if($task->submitted_at && $isAwaiting)
                            <div>
                                <label class="tk-qv-label">Onaya Gönderen</label>
                                <span>{{ $task->submitter?->full_name ?? '—' }} · {{ $task->submitted_at->translatedFormat('d M Y, H:i') }}</span>
                            </div>
                        @endif
                        @if($task->completed_at)
                            <div>
                                <label class="tk-qv-label">Tamamlanma</label>
                                <span>{{ $task->completed_at->translatedFormat('d M Y, H:i') }} · {{ $task->completer?->full_name ?? '—' }}</span>
                            </div>
                        @endif
                        @if($task->approved_at)
                            <div>
                                <label class="tk-qv-label">Onaylayan</label>
                                <span>{{ $task->approver?->full_name ?? '—' }} · {{ $task->approved_at->translatedFormat('d M Y, H:i') }}</span>
                            </div>
                        @endif
                    </div>

                </x-quick-view.sidebar>

                <x-quick-view.main>

                    <div class="tk-qv-block">
                        <label class="tk-qv-label">Açıklama</label>
                        @if($task->is_auto)
                            {{-- Otomatik görev açıklaması şablondan gelir (zengin metin olabilir; değerler üretimde escape edilir) --}}
                            <div class="tk-qv-desc-html">{!! $task->description ?: '—' !!}</div>
                        @elseif($canTouch)
                            <textarea class="tk-qv-input tk-qv-desc" data-field="description" rows="5"
                                      placeholder="Açıklama ekleyin…">{{ $task->description }}</textarea>
                        @else
                            <p class="tk-qv-desc-ro">{{ $task->description ?: '—' }}</p>
                        @endif
                    </div>

                    {{-- ── Kontrol Listesi (checklist) ── --}}
                    <div class="tk-qv-block" data-role="checklist-block">
                        <div class="d-flex align-items-center justify-content-between mb-1">
                            <label class="tk-qv-label mb-0">
                                Kontrol Listesi
                                <span class="tk-tl-count" data-role="cl-count">{{ $checklistDone }}/{{ $checklist->count() }}</span>
                            </label>
                        </div>

                        <div class="tk-cl-progress" @if($checklist->isEmpty()) hidden @endif>
                            <div class="tk-cl-bar" data-role="cl-bar" style="width: {{ $checklist->count() ? round($checklistDone / $checklist->count() * 100) : 0 }}%;"></div>
                        </div>

                        <div class="tk-cl" data-role="cl-list">
                            @foreach($checklist as $item)
                                <div class="tk-cl-item {{ $item->isDone() ? 'done' : '' }}" data-item-id="{{ $item->id }}">
                                    <button type="button" class="tk-cl-check" data-role="cl-toggle" {{ $canTouch ? '' : 'disabled' }}>
                                        <i class="fas fa-check"></i>
                                    </button>
                                    <div class="tk-cl-body">
                                        <span class="tk-cl-title">{{ $item->title }}</span>
                                        <small class="tk-cl-meta" data-role="cl-meta">
                                            @if($item->isDone())
                                                <i class="fas fa-user-check"></i> {{ $item->doneBy?->full_name ?? '—' }} · {{ $item->done_at->translatedFormat('d M Y, H:i') }}
                                            @endif
                                        </small>
                                    </div>
                                    @if($canTouch)
                                        <button type="button" class="tk-cl-del" data-role="cl-del" title="Maddeyi sil"><i class="fas fa-xmark"></i></button>
                                    @endif
                                </div>
                            @endforeach
                        </div>

                        @if($canTouch && ! $isArchived)
                            <div class="tk-cl-add">
                                <input type="text" class="tk-qv-input" maxlength="200" data-role="cl-input" placeholder="Yeni madde ekle…">
                                <button type="button" class="tk-cl-addbtn" data-role="cl-add"><i class="fas fa-plus"></i></button>
                            </div>
                        @elseif($checklist->isEmpty())
                            <p class="text-muted" style="font-size:.82rem;">Kontrol listesi yok.</p>
                        @endif
                    </div>

                    <div class="tk-qv-block">
                        <label class="tk-qv-label">İlişkili Kayıtlar</label>
                        @if($task->relations->isNotEmpty())
                            <div class="tk-qv-rels">
                                @foreach($task->relations as $rel)
                                    <div class="tk-qv-rel" @if($rel->quickViewUrl()) onclick="openQuickView('{{ $rel->quickViewUrl() }}')" @endif>
                                        <i class="fas {{ $rel->meta()['icon'] }}"></i>
                                        <div>
                                            <b>{{ $rel->label() }}</b>
                                            <small>{{ $rel->meta()['label'] }}{{ $rel->is_primary ? ' · Ana kayıt' : '' }}</small>
                                        </div>
                                        <i class="fas fa-arrow-up-right-from-square tk-qv-rel-go"></i>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <p class="text-muted" style="font-size:.82rem;">İlişkili kayıt yok.</p>
                        @endif
                    </div>

                    {{-- ── Zaman Tüneli: notlar, güncellemeler + sistem olayları ── --}}
                    @php
                        $timeline = collect();
                        foreach ($task->comments as $c) {
                            $timeline->push(['type' => 'note', 'time' => $c->created_at, 'comment' => $c]);
                        }
                        $timeline->push([
                            'type' => 'system', 'time' => $task->created_at,
                            'icon' => $task->is_auto ? 'fa-robot' : 'fa-plus', 'color' => '#4f46e5',
                            'text' => $task->is_auto
                                ? 'Görev sistem tarafından otomatik oluşturuldu'
                                : 'Görev ' . ($task->creator?->full_name ?? '—') . ' tarafından oluşturuldu',
                        ]);
                        if ($task->submitted_at) {
                            $timeline->push([
                                'type' => 'system', 'time' => $task->submitted_at,
                                'icon' => 'fa-user-check', 'color' => '#0ea5e9',
                                'text' => ($task->submitter?->full_name ?? '—') . ' görevi tamamlandı olarak işaretledi (onay bekliyor)',
                            ]);
                        }
                        if ($task->completed_at) {
                            $timeline->push([
                                'type' => 'system', 'time' => $task->completed_at,
                                'icon' => 'fa-check', 'color' => '#16a34a',
                                'text' => 'Görev ' . ($task->completer?->full_name ?? '—') . ' tarafından tamamlandı'
                                    . ($task->approved_at ? ' — ' . ($task->approver?->full_name ?? '—') . ' onayladı' : ''),
                            ]);
                        }
                        if ($task->archived_at) {
                            $timeline->push([
                                'type' => 'system', 'time' => $task->archived_at,
                                'icon' => 'fa-box-archive', 'color' => '#64748b',
                                'text' => 'Görev ' . ($task->archiver?->full_name ?? '—') . ' tarafından arşive alındı',
                            ]);
                        }
                        $timeline = $timeline->sortByDesc('time')->values();
                    @endphp

                    <div class="tk-qv-block">
                        <label class="tk-qv-label">Zaman Tüneli <span class="tk-tl-count" data-role="tl-count">{{ $task->comments->count() }}</span></label>

                        @if($canTouch)
                            <div class="tk-tl-composer">
                                <span class="tk-avatar">{{ auth()->user()->initials }}</span>
                                <div class="tk-tl-composer-body" style="position:relative;">
                                    <textarea class="tk-qv-input" rows="2" maxlength="3000" data-role="tl-input"
                                              placeholder="Not, açıklama veya güncelleme yazın…"></textarea>

                                    {{-- Seçilen dosya + referans chip'leri --}}
                                    <div class="tk-tl-chips" data-role="tl-chips"></div>

                                    {{-- Modül referansı seçici (chat'teki gibi arama) --}}
                                    <div class="tk-tl-refpick" data-role="ref-pick" hidden>
                                        <div class="tk-tl-refsearch">
                                            <i class="fas fa-magnifying-glass"></i>
                                            <input type="text" data-role="ref-search" placeholder="Müşteri, satış, tedarikçi, kaynak, kalkış ara…" autocomplete="off">
                                            <button type="button" data-role="ref-close" title="Kapat"><i class="fas fa-xmark"></i></button>
                                        </div>
                                        <div class="tk-tl-refresults" data-role="ref-results">
                                            <div class="tk-tl-refempty">Aramak için en az 2 karakter yazın.</div>
                                        </div>
                                    </div>

                                    <div class="tk-tl-actions">
                                        <button type="button" class="tk-tl-send" data-role="tl-send">
                                            <i class="fas fa-paper-plane"></i> Ekle
                                        </button>
                                        <button type="button" class="tk-tl-tool" data-role="tl-attach" title="Dosya ekle (png, pdf, excel vb.)">
                                            <i class="fas fa-paperclip"></i>
                                        </button>
                                        <button type="button" class="tk-tl-tool" data-role="tl-ref" title="İlişkili veri ekle (modül referansı)">
                                            <i class="fas fa-link"></i>
                                        </button>
                                        <input type="file" multiple hidden data-role="tl-file">
                                        <span class="tk-tl-hint"><i class="fas fa-keyboard"></i> <kbd>Ctrl</kbd> + <kbd>Enter</kbd> ile hızlı kaydet</span>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <div class="tk-tl" data-role="tl-list">
                            @foreach($timeline as $item)
                                @if($item['type'] === 'note')
                                    @php $c = $item['comment']; @endphp
                                    <div class="tk-tl-item" data-comment-id="{{ $c->id }}">
                                        <span class="tk-tl-dot"><span class="tk-avatar">{{ $c->user?->initials ?? '?' }}</span></span>
                                        <div class="tk-tl-card">
                                            <div class="tk-tl-head">
                                                <b>{{ $c->user?->full_name ?? 'Silinmiş kullanıcı' }}</b>
                                                <small>{{ $c->created_at->translatedFormat('d M Y, H:i') }}</small>
                                                @if($c->user_id === auth()->id() || $canAssign)
                                                    <button type="button" class="tk-tl-del" data-role="tl-del" data-id="{{ $c->id }}" title="Notu sil">
                                                        <i class="fas fa-xmark"></i>
                                                    </button>
                                                @endif
                                            </div>
                                            @if($c->body !== '' && $c->body !== null)
                                                <p>{{ $c->body }}</p>
                                            @endif

                                            @if($c->attachments->isNotEmpty())
                                                <div class="tk-tl-atts">
                                                    @foreach($c->attachments as $a)
                                                        @if($a->kind === 'image')
                                                            <a href="{{ $a->url }}" target="_blank" class="tk-tl-att-img"><img src="{{ $a->url }}" alt="{{ $a->original_name }}"></a>
                                                        @else
                                                            <a href="{{ $a->url }}" target="_blank" download="{{ $a->original_name }}" class="tk-tl-att-file">
                                                                <i class="fas fa-file-lines"></i>
                                                                <span>{{ $a->original_name }}</span>
                                                                <small>{{ $a->human_size }}</small>
                                                            </a>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            @endif

                                            @if(is_array($c->links) && count($c->links))
                                                <div class="tk-tl-links">
                                                    @foreach($c->links as $l)
                                                        @php
                                                            [$lAlias, $lId] = array_pad(explode(':', (string) ($l['key'] ?? ''), 2), 2, null);
                                                            $lMeta = \App\Models\Task\TaskRelation::LINKABLE[$lAlias] ?? null;
                                                            $lUrl = $lMeta ? \App\Models\Task\TaskRelation::quickViewUrlFor($lAlias, (int) $lId) : null;
                                                        @endphp
                                                        <span class="tk-tl-link" @if($lUrl) onclick="openQuickView('{{ $lUrl }}')" @endif>
                                                            <i class="fas {{ $lMeta['icon'] ?? 'fa-link' }}"></i>{{ $l['label'] ?? 'Kayıt' }}
                                                        </span>
                                                    @endforeach
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                @else
                                    <div class="tk-tl-item sys">
                                        <span class="tk-tl-dot sysdot" style="--sc: {{ $item['color'] }};"><i class="fas {{ $item['icon'] }}"></i></span>
                                        <div class="tk-tl-sys">
                                            <span>{{ $item['text'] }}</span>
                                            <small>{{ $item['time']->translatedFormat('d M Y, H:i') }}</small>
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </div>

                    @if($task->is_auto && $task->context)
                        <div class="tk-qv-block">
                            <label class="tk-qv-label">Otomatik Görev Detayları</label>
                            <div class="tk-qv-ctx">
                                @if($triggerDef = \App\Services\Task\TaskTriggerCatalog::get($task->trigger_key ?? ''))
                                    <div class="tk-qv-ctx-row"><span>Tetikleyici</span><b>{{ $triggerDef['label'] }}</b></div>
                                @endif
                                @foreach($task->context as $key => $value)
                                    @if(is_scalar($value) && $value !== '' && $value !== null)
                                        <div class="tk-qv-ctx-row"><span>{{ \Illuminate\Support\Str::of($key)->replace('_', ' ')->title() }}</span><b>{{ $value }}</b></div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    @endif

                </x-quick-view.main>
            </div>
        </div>
    </x-quick-view.content>
</x-quick-view.layout>

<style>
    .tk-qv .tk-qv-av, .tk-qv .qv-avatar-big.tk-qv-av {
        background: linear-gradient(135deg, #f59e0b, #d97706) !important;
        box-shadow: 0 10px 25px rgba(217, 119, 6, .25) !important;
    }
    .tk-qv-grid { display: grid; grid-template-columns: 320px 1fr; height: 100%; }
    @media (max-width: 860px) { .tk-qv-grid { grid-template-columns: 1fr; } }

    .tk-qv-title { cursor: text; }
    .tk-qv-block { margin-bottom: 1.6rem; }
    .tk-qv-label { display: block; font-size: .68rem; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .45rem; }
    .tk-qv-label small { text-transform: none; letter-spacing: 0; font-weight: 600; color: #cbd5e1; }
    .tk-qv-input { width: 100%; border: 1px solid #e2e8f0; border-radius: 10px; padding: .5rem .7rem; font-size: .84rem; color: #1e293b; background: #fff; }
    .tk-qv-input:focus { outline: none; border-color: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,.18); }
    .tk-qv-input:disabled { background: #f8fafc; color: #94a3b8; }

    /* Son tarih: gün + isteğe bağlı saat */
    .tk-qv-due { display: flex; gap: .4rem; }
    .tk-qv-due .tk-qv-due-time { flex: 0 0 7.6rem; }
    .tk-qv-desc { resize: vertical; min-height: 110px; line-height: 1.55; }
    .tk-qv-desc-ro { font-size: .86rem; color: #334155; line-height: 1.6; white-space: pre-wrap; }
    .tk-qv-desc-html { font-size: .86rem; color: #334155; line-height: 1.6; }
    .tk-qv-desc-html p { margin: 0 0 .5rem; }
    .tk-qv-desc-html p:last-child { margin-bottom: 0; }
    .tk-qv-desc-html ul, .tk-qv-desc-html ol { margin: 0 0 .5rem; padding-left: 1.2rem; }

    .tk-qv-statuses { display: flex; flex-wrap: wrap; gap: .4rem; }
    .tk-qv-status {
        border: 1.5px solid #e2e8f0; background: #fff; color: #64748b; font-size: .74rem; font-weight: 800;
        border-radius: 999px; padding: .32rem .75rem; cursor: pointer; transition: all .15s ease;
    }
    .tk-qv-status:hover:not(:disabled) { border-color: var(--sc); color: var(--sc); }
    .tk-qv-status.on { border-color: var(--sc); color: var(--sc); background: color-mix(in srgb, var(--sc) 10%, #fff); }
    .tk-qv-status:disabled { opacity: .55; cursor: not-allowed; }

    .tk-qv-people { display: flex; flex-direction: column; gap: .45rem; }
    .tk-qv-person { display: flex; align-items: center; gap: .55rem; font-size: .84rem; font-weight: 700; color: #334155; }

    .tk-qv-mini {
        border: 1px solid #e2e8f0; background: #fff; color: #64748b; font-size: .7rem; font-weight: 800;
        border-radius: 8px; padding: .22rem .55rem; cursor: pointer; transition: all .15s ease;
    }
    .tk-qv-mini:hover { color: #92400e; border-color: #fde68a; background: #fffbeb; }
    .tk-qv-mini.solid { background: #d97706; border-color: #d97706; color: #fff; margin-top: .4rem; }
    .tk-qv-mini.solid:hover { filter: brightness(1.08); color: #fff; }

    .tk-qv-assignee-editor { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed #e2e8f0; }
    .tk-qv-checkchip { margin: 0; cursor: pointer; }
    .tk-qv-checkchip input { display: none; }
    .tk-qv-checkchip span {
        display: inline-block; font-size: .74rem; font-weight: 700; color: #64748b;
        border: 1.5px solid #e2e8f0; border-radius: 999px; padding: .26rem .65rem; transition: all .15s ease;
    }
    .tk-qv-checkchip input:checked + span { color: #92400e; border-color: #d97706; background: #fffbeb; }

    .tk-qv-meta > div { margin-bottom: .8rem; }
    .tk-qv-meta span { font-size: .82rem; font-weight: 700; color: #334155; }

    .tk-qv-rels { display: flex; flex-direction: column; gap: .5rem; }
    .tk-qv-rel {
        display: flex; align-items: center; gap: .75rem; border: 1px solid #e9edf3; border-radius: 12px;
        padding: .65rem .8rem; cursor: pointer; transition: all .15s ease; background: #fff;
    }
    .tk-qv-rel:hover { border-color: #fde68a; background: #fffbeb; transform: translateX(3px); }
    .tk-qv-rel > i:first-child {
        width: 34px; height: 34px; border-radius: 10px; background: #f1f5f9; color: #64748b;
        display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0;
    }
    .tk-qv-rel:hover > i:first-child { background: #fde68a; color: #92400e; }
    .tk-qv-rel b { display: block; font-size: .82rem; font-weight: 700; color: #1e293b; line-height: 1.25; }
    .tk-qv-rel small { font-size: .7rem; font-weight: 700; color: #94a3b8; }
    .tk-qv-rel-go { margin-left: auto; color: #cbd5e1; font-size: .72rem; }
    .tk-qv-rel:hover .tk-qv-rel-go { color: #d97706; }

    /* ── Zaman Tüneli ── */
    .tk-tl-count { font-size: .62rem; font-weight: 800; background: #fef3c7; color: #92400e; border-radius: 999px; padding: .1rem .45rem; margin-left: .3rem; }
    .tk-tl-composer { display: flex; gap: .6rem; margin-bottom: 1rem; }
    .tk-tl-composer > .tk-avatar { flex-shrink: 0; margin-top: .2rem; }
    .tk-tl-composer-body { flex: 1; }
    .tk-tl-composer-body textarea { resize: vertical; min-height: 58px; margin-bottom: .4rem; }
    .tk-tl-send {
        display: inline-flex; align-items: center; gap: .4rem; border: none; cursor: pointer;
        background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff;
        font-weight: 800; font-size: .74rem; padding: .4rem .85rem; border-radius: 9px;
        box-shadow: 0 4px 10px -4px rgba(217,119,6,.5); transition: all .15s ease;
    }
    .tk-tl-send:hover { transform: translateY(-1px); filter: brightness(1.05); }
    .tk-tl-send:disabled { opacity: .6; }
    .tk-tl-actions { display: flex; align-items: center; gap: .6rem; }
    .tk-tl-hint { font-size: .66rem; font-weight: 600; color: #b6c2d2; }
    .tk-tl-hint kbd {
        font-size: .6rem; font-weight: 800; color: #64748b; background: #f1f5f9;
        border: 1px solid #e2e8f0; border-bottom-width: 2px; border-radius: 5px; padding: .06rem .3rem;
    }

    /* Composer araçları + chip'ler + referans seçici */
    .tk-tl-tool {
        width: 30px; height: 30px; border-radius: 9px; border: 1px solid #e2e8f0; background: #fff; color: #64748b;
        cursor: pointer; font-size: .74rem; transition: all .14s ease;
    }
    .tk-tl-tool:hover { border-color: #fde68a; background: #fffbeb; color: #92400e; }
    .tk-tl-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
    .tk-tl-chips:not(:empty) { margin-bottom: .45rem; }
    .tk-tl-chip {
        display: inline-flex; align-items: center; gap: .4rem; max-width: 240px;
        font-size: .72rem; font-weight: 700; color: #475569; background: #f1f5f9;
        border: 1px solid #e2e8f0; border-radius: 8px; padding: .22rem .55rem;
    }
    .tk-tl-chip.ref { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
    .tk-tl-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tk-tl-chip .x { cursor: pointer; color: inherit; opacity: .6; }
    .tk-tl-chip .x:hover { opacity: 1; }
    .tk-tl-refpick {
        position: absolute; left: 0; right: 0; top: calc(100% - 46px); z-index: 20;
        background: #fff; border: 1px solid #e2e8f0; border-radius: 13px;
        box-shadow: 0 18px 44px -12px rgba(15,23,42,.25); overflow: hidden;
    }
    .tk-tl-refsearch { display: flex; align-items: center; gap: .5rem; padding: .55rem .75rem; border-bottom: 1px solid #f1f5f9; color: #94a3b8; }
    .tk-tl-refsearch input { flex: 1; border: none; outline: none; font-size: .82rem; color: #1e293b; }
    .tk-tl-refsearch button { border: none; background: #f1f5f9; color: #64748b; width: 26px; height: 26px; border-radius: 8px; cursor: pointer; }
    .tk-tl-refresults { max-height: 240px; overflow-y: auto; padding: .4rem; }
    .tk-tl-refempty { text-align: center; color: #b6c2d2; font-size: .76rem; font-weight: 700; padding: 1rem; }
    .tk-tl-refitem {
        display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem; border-radius: 9px; cursor: pointer;
        transition: background .12s ease;
    }
    .tk-tl-refitem:hover { background: #fffbeb; }
    .tk-tl-refitem > i {
        width: 30px; height: 30px; border-radius: 9px; background: #f1f5f9; color: #64748b;
        display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; flex-shrink: 0;
    }
    .tk-tl-refitem b { display: block; font-size: .78rem; font-weight: 700; color: #1e293b; line-height: 1.25; }
    .tk-tl-refitem small { font-size: .66rem; font-weight: 600; color: #94a3b8; }
    .tk-tl-refitem .grp { margin-left: auto; font-size: .6rem; font-weight: 800; color: #92400e; background: #fef3c7; border-radius: 999px; padding: .1rem .45rem; flex-shrink: 0; }

    /* Not içi ekler + referanslar */
    .tk-tl-atts { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .5rem; }
    .tk-tl-att-img { display: inline-block; border-radius: 10px; overflow: hidden; border: 1px solid #eef1f6; }
    .tk-tl-att-img img { max-width: 160px; max-height: 120px; display: block; object-fit: cover; }
    .tk-tl-att-file {
        display: inline-flex; align-items: center; gap: .5rem; max-width: 100%;
        font-size: .74rem; font-weight: 700; color: #334155; text-decoration: none;
        background: #f8fafc; border: 1px solid #e9edf3; border-radius: 9px; padding: .35rem .6rem;
        transition: all .13s ease;
    }
    .tk-tl-att-file:hover { border-color: #cbd5e1; color: #0f172a; background: #f1f5f9; }
    .tk-tl-att-file span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
    .tk-tl-att-file small { color: #94a3b8; font-weight: 600; flex-shrink: 0; }
    .tk-tl-links { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
    .tk-tl-link {
        display: inline-flex; align-items: center; gap: .35rem; max-width: 260px; overflow: hidden;
        font-size: .72rem; font-weight: 700; color: #1d4ed8; background: #eff6ff; border: 1px solid #bfdbfe;
        border-radius: 8px; padding: .22rem .55rem; cursor: pointer; white-space: nowrap; text-overflow: ellipsis;
        transition: all .13s ease;
    }
    .tk-tl-link:hover { background: #dbeafe; }
    .tk-tl-link i { font-size: .64rem; }

    .tk-tl { position: relative; display: flex; flex-direction: column; gap: .75rem; padding-left: .25rem; }
    .tk-tl::before {
        content: ''; position: absolute; left: 16px; top: 8px; bottom: 8px; width: 2px;
        background: linear-gradient(180deg, #fde68a, #eef1f6); border-radius: 2px;
    }
    .tk-tl-item { position: relative; display: flex; gap: .7rem; }
    .tk-tl-dot { position: relative; z-index: 1; flex-shrink: 0; }
    .tk-tl-dot .tk-avatar { width: 32px; height: 32px; font-size: .66rem; border: 3px solid #fff; box-shadow: 0 0 0 1px #eef1f6; }
    .tk-tl-dot.sysdot {
        width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
        background: color-mix(in srgb, var(--sc, #64748b) 12%, #fff); color: var(--sc, #64748b);
        border: 3px solid #fff; box-shadow: 0 0 0 1px #eef1f6; font-size: .7rem;
    }
    .tk-tl-card {
        flex: 1; background: #fbfcfd; border: 1px solid #eef1f6; border-radius: 12px; padding: .6rem .8rem;
        transition: border-color .15s ease;
    }
    .tk-tl-card:hover { border-color: #e2e8f0; }
    .tk-tl-head { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .25rem; }
    .tk-tl-head b { font-size: .78rem; font-weight: 800; color: #1e293b; }
    .tk-tl-head small { font-size: .68rem; font-weight: 600; color: #94a3b8; }
    .tk-tl-del {
        margin-left: auto; border: none; background: transparent; color: #cbd5e1; cursor: pointer;
        width: 20px; height: 20px; border-radius: 6px; font-size: .68rem; transition: all .12s ease;
    }
    .tk-tl-del:hover { background: #fee2e2; color: #dc2626; }
    .tk-tl-card p { margin: 0; font-size: .82rem; color: #334155; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
    .tk-tl-item.sys { align-items: center; }
    .tk-tl-sys { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
    .tk-tl-sys span { font-size: .76rem; font-weight: 700; color: #64748b; }
    .tk-tl-sys small { font-size: .66rem; font-weight: 600; color: #b6c2d2; }

    .tk-qv-ctx { border: 1px solid #e9edf3; border-radius: 12px; overflow: hidden; }
    .tk-qv-ctx-row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .8rem; font-size: .8rem; }
    .tk-qv-ctx-row:nth-child(odd) { background: #fafbfc; }
    .tk-qv-ctx-row span { color: #94a3b8; font-weight: 700; }
    .tk-qv-ctx-row b { color: #1e293b; font-weight: 700; text-align: right; }

    /* ── Onay bandı ── */
    .tk-qv-approval {
        display: flex; gap: .9rem; align-items: flex-start;
        background: linear-gradient(135deg, #f0f9ff, #fff); border: 1px solid #bae6fd; border-radius: 16px;
        padding: 1rem 1.2rem; margin: 1.2rem 1.5rem 0;
    }
    .tk-qv-approval-ic {
        width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
        background: linear-gradient(135deg, #38bdf8, #0ea5e9); color: #fff;
        display: flex; align-items: center; justify-content: center; font-size: 1rem;
        box-shadow: 0 8px 18px -8px rgba(14,165,233,.6);
    }
    .tk-qv-approval-tx { flex: 1; min-width: 0; }
    .tk-qv-approval-tx b { display: block; font-size: .88rem; font-weight: 800; color: #0c4a6e; margin-bottom: .15rem; }
    .tk-qv-approval-tx > span { font-size: .78rem; font-weight: 600; color: #475569; line-height: 1.5; }
    .tk-qv-approval-actions { display: flex; gap: .5rem; margin-top: .65rem; flex-wrap: wrap; }
    .tk-qv-approve {
        display: inline-flex; align-items: center; gap: .4rem; border: none; cursor: pointer;
        background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff;
        font-weight: 800; font-size: .78rem; padding: .5rem .95rem; border-radius: 10px;
        box-shadow: 0 6px 14px -6px rgba(22,163,74,.55); transition: all .15s ease;
    }
    .tk-qv-approve:hover { transform: translateY(-1px); filter: brightness(1.05); }
    .tk-qv-reject {
        display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
        border: 1px solid #fecaca; background: #fff; color: #dc2626;
        font-weight: 800; font-size: .78rem; padding: .5rem .95rem; border-radius: 10px; transition: all .15s ease;
    }
    .tk-qv-reject:hover { background: #fee2e2; }
    .tk-qv-reject.solid { border: none; background: #dc2626; color: #fff; margin-top: .45rem; }
    .tk-qv-reject.solid:hover { background: #b91c1c; }
    .tk-qv-reject-box { margin-top: .6rem; }
    .tk-qv-reject-box textarea { resize: vertical; }

    /* ── Kontrol listesi ── */
    .tk-cl-progress { height: 6px; background: #eef1f6; border-radius: 6px; overflow: hidden; margin-bottom: .7rem; }
    .tk-cl-bar { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #22c55e, #16a34a); transition: width .25s ease; }
    .tk-cl { display: flex; flex-direction: column; gap: .4rem; }
    .tk-cl-item {
        display: flex; align-items: flex-start; gap: .6rem;
        border: 1px solid #eef1f6; border-radius: 11px; padding: .5rem .65rem; background: #fff;
        transition: all .15s ease;
    }
    .tk-cl-item:hover { border-color: #e2e8f0; }
    .tk-cl-item.done { background: #f8fdf9; border-color: #dcfce7; }
    .tk-cl-check {
        width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid #d7dee9; background: #fff; color: transparent;
        display: inline-flex; align-items: center; justify-content: center; font-size: .6rem; cursor: pointer;
        flex-shrink: 0; margin-top: .1rem; transition: all .15s ease;
    }
    .tk-cl-check:hover:not(:disabled) { border-color: #16a34a; color: #bbf7d0; }
    .tk-cl-item.done .tk-cl-check { background: #16a34a; border-color: #16a34a; color: #fff; }
    .tk-cl-check:disabled { cursor: not-allowed; opacity: .6; }
    .tk-cl-body { flex: 1; min-width: 0; }
    .tk-cl-title { display: block; font-size: .82rem; font-weight: 700; color: #334155; line-height: 1.4; word-break: break-word; }
    .tk-cl-item.done .tk-cl-title { text-decoration: line-through; text-decoration-color: #86efac; color: #64748b; }
    .tk-cl-meta { display: block; font-size: .66rem; font-weight: 700; color: #16a34a; margin-top: .1rem; }
    .tk-cl-meta:empty { display: none; }
    .tk-cl-del {
        border: none; background: transparent; color: #cbd5e1; cursor: pointer;
        width: 22px; height: 22px; border-radius: 6px; font-size: .66rem; flex-shrink: 0; transition: all .12s ease;
    }
    .tk-cl-del:hover { background: #fee2e2; color: #dc2626; }
    .tk-cl-add { display: flex; gap: .45rem; margin-top: .55rem; }
    .tk-cl-addbtn {
        width: 38px; border: none; border-radius: 10px; cursor: pointer; flex-shrink: 0;
        background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; font-size: .8rem;
        box-shadow: 0 4px 10px -4px rgba(217,119,6,.5); transition: all .15s ease;
    }
    .tk-cl-addbtn:hover { transform: translateY(-1px); filter: brightness(1.05); }

    .tk-qv-complete {
        display: inline-flex; align-items: center; gap: .45rem; border: none; cursor: pointer;
        background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff;
        font-weight: 800; font-size: .82rem; padding: .55rem 1rem; border-radius: 12px;
        box-shadow: 0 6px 16px -6px rgba(22,163,74,.55); transition: all .15s ease;
    }
    .tk-qv-complete:hover { transform: translateY(-2px); filter: brightness(1.05); }

    .tk-qv-unarchive {
        display: inline-flex; align-items: center; gap: .45rem; border: none; cursor: pointer;
        background: linear-gradient(135deg, #64748b, #475569); color: #fff;
        font-weight: 800; font-size: .82rem; padding: .55rem 1rem; border-radius: 12px;
        box-shadow: 0 6px 16px -6px rgba(71,85,105,.55); transition: all .15s ease;
    }
    .tk-qv-unarchive:hover { transform: translateY(-2px); filter: brightness(1.08); }

    /* Header'daki tk-* rozetleri drawer bağlamında da çalışsın */
    .tk-qv .tk-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 800; padding: .18rem .55rem; border-radius: 999px; letter-spacing: .02em; }
    .tk-qv .tk-auto-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .64rem; font-weight: 800; color: #7c3aed; background: #f3e8ff; padding: .15rem .5rem; border-radius: 999px; }
    .tk-qv .tk-due { display: inline-flex; align-items: center; gap: .32rem; font-size: .72rem; font-weight: 700; color: #64748b; }
    .tk-qv .tk-due.over { color: #dc2626; }
    .tk-qv .tk-avatar { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: #e2e8f0; color: #475569; font-size: .62rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
</style>

<script>
(function () {
    const root = document.getElementById('{{ $uid }}');
    if (!root) return;

    const UPDATE_FIELD_URL = "{{ route('agency.tasks.update-field', $task) }}";
    const STATUS_URL = "{{ route('agency.tasks.status', $task) }}";
    const QV_URL = "{{ route('agency.tasks.quick-view', $task) }}";
    const CSRF = document.querySelector('meta[name="csrf-token"]')?.content;
    const STATUSES = {!! json_encode(\App\Models\Task\Task::STATUSES) !!};
    // Bu kullanıcının "tamamlandı" işareti onaya mı düşecek?
    const NEEDS_APPROVAL = @js($task->needsApprovalFrom((int) auth()->id()));
    const APPROVER = @js($task->creator?->full_name);
    const ME = @js(auth()->user()->full_name);

    function reloadQv() {
        if (typeof openQuickView === 'function') openQuickView(QV_URL);
    }

    function patch(url, body) {
        return fetch(url, {
            method: 'PATCH',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'X-Requested-With': 'XMLHttpRequest' },
            body: JSON.stringify(body)
        }).then(r => { if (!r.ok) throw new Error(); return r.json(); });
    }

    function toast(ok, msg) {
        appToast({ icon: ok ? 'success' : 'error', title: msg, timer: 2400 });
    }

    function setStatusUi(status) {
        statusWrap?.querySelectorAll('.tk-qv-status').forEach(b => b.classList.toggle('on', b.dataset.status === status));
        const badge = root.querySelector('[data-role="status-badge"]');
        const meta = STATUSES[status];
        if (badge && meta) {
            badge.textContent = meta.label;
            badge.style.background = meta.color + '18';
            badge.style.color = meta.color;
        }
    }

    /**
     * Görev kapandığında kontrol listesindeki açık maddeler de kapanır (sunucu
     * bunu zaten yapar). Çekmeceyi yeniden yüklemeden ekranı da eşitler.
     */
    function markChecklistDone() {
        const items = root.querySelectorAll('.tk-cl-item');
        if (!items.length) return 0;

        const stamp = new Date().toLocaleDateString('tr-TR', { day: '2-digit', month: 'short', year: 'numeric' })
            + ', ' + new Date().toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' });

        let closed = 0;
        items.forEach(item => {
            if (item.classList.contains('done')) return;
            item.classList.add('done');
            closed++;
            const meta = item.querySelector('[data-role="cl-meta"]');
            if (meta) meta.innerHTML = `<i class="fas fa-user-check"></i> ${ME} · ${stamp}`;
        });

        const count = root.querySelector('[data-role="cl-count"]');
        if (count) count.textContent = `${items.length}/${items.length}`;
        const bar = root.querySelector('[data-role="cl-bar"]');
        if (bar) bar.style.width = '100%';

        return closed;
    }

    /**
     * "Tamamlandı" akışının ortak sonu: onay şartı varsa görev kapanmaz, atayanın
     * onayına düşer — kullanıcı bunu uyarı olarak görür.
     */
    function afterComplete(d) {
        if (d.sent_to_approval) {
            markChecklistDone();
            setStatusUi('awaiting_approval');
            appAlert({
                icon: 'info',
                title: 'Görev onay gerektiriyor',
                text: (d.approver ? d.approver : 'Görevi atayan kişi') + ' onaylayana kadar görev tamamlanmış sayılmaz. '
                    + 'Tamamlandı bilgisi onayına gönderildi.',
                confirmButtonText: 'Anladım'
            });
            reloadQv();
            return;
        }

        const closed = markChecklistDone();
        setStatusUi('completed');
        root.querySelector('[data-role="complete-btn"]')?.remove();
        toast(true, closed ? `Görev tamamlandı 🎉 — ${closed} kontrol maddesi de işaretlendi` : 'Görev tamamlandı 🎉');
    }

    /** Onay şartlı görevlerde tamamlamadan ÖNCE uyarır. */
    function confirmComplete() {
        if (!NEEDS_APPROVAL) return Promise.resolve(true);

        return appConfirm({
            icon: 'warning',
            title: 'Bu görev onay gerektiriyor',
            text: 'Tamamlandı olarak işaretlerseniz görev kapanmaz; '
                + (APPROVER ? APPROVER : 'görevi atayan kişi') + ' onayına düşer. '
                + 'Kontrol listesindeki tüm maddeler de tamamlandı olarak işaretlenecek.',
            confirmButtonText: 'Onaya gönder',
            cancelButtonText: 'Vazgeç'
        }).then(r => !!(r && r.isConfirmed));
    }

    // ── Durum pilleri ──
    const statusWrap = root.querySelector('[data-role="statuses"]');
    statusWrap?.addEventListener('click', (e) => {
        const btn = e.target.closest('.tk-qv-status');
        if (!btn || btn.disabled || btn.classList.contains('on')) return;
        const target = btn.dataset.status;

        const gate = target === 'completed' ? confirmComplete() : Promise.resolve(true);

        gate.then(ok => {
            if (!ok) return;
            patch(STATUS_URL, { status: target }).then((d) => {
                if (target === 'completed' || d.sent_to_approval) {
                    afterComplete(d);
                    return;
                }
                setStatusUi(d.status || target);
                root.querySelector('[data-role="complete-btn"]')?.remove();
                toast(true, 'Durum güncellendi');
            }).catch(() => toast(false, 'Durum güncellenemedi'));
        });
    });

    // ── Tamamla butonu ──
    root.querySelector('[data-role="complete-btn"]')?.addEventListener('click', function () {
        const btn = this;
        confirmComplete().then(ok => {
            if (!ok) return;
            btn.disabled = true;
            patch(STATUS_URL, { status: 'completed' })
                .then(afterComplete)
                .catch(() => { btn.disabled = false; toast(false, 'İşlem başarısız'); });
        });
    });

    // ── Onay akışı: onayla / reddet ──
    root.querySelector('[data-role="approve-btn"]')?.addEventListener('click', function () {
        this.disabled = true;
        fetch("{{ route('agency.tasks.approve', $task) }}", {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': CSRF, 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
        })
        .then(r => { if (!r.ok) throw new Error(); return r.json(); })
        .then(() => { toast(true, 'Görev onaylandı ve tamamlandı 🎉'); reloadQv(); })
        .catch(() => { this.disabled = false; toast(false, 'Onaylanamadı'); });
    });

    root.querySelector('[data-role="reject-btn"]')?.addEventListener('click', () => {
        const box = root.querySelector('[data-role="reject-box"]');
        if (box) { box.hidden = !box.hidden; if (!box.hidden) box.querySelector('textarea')?.focus(); }
    });

    root.querySelector('[data-role="reject-confirm"]')?.addEventListener('click', function () {
        this.disabled = true;
        const reason = root.querySelector('[data-role="reject-reason"]')?.value || '';
        fetch("{{ route('agency.tasks.reject', $task) }}", {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
            body: JSON.stringify({ reason })
        })
        .then(r => { if (!r.ok) throw new Error(); return r.json(); })
        .then(() => { toast(true, 'Reddedildi — görev yeniden atananın önüne düştü'); reloadQv(); })
        .catch(() => { this.disabled = false; toast(false, 'İşlem başarısız'); });
    });

    // ── Kontrol listesi ──
    const CL_STORE_URL = "{{ route('agency.tasks.checklist.store', $task) }}";
    const CL_BASE_URL = "{{ url('agency/tasks/' . $task->id . '/checklist') }}";
    const clList = root.querySelector('[data-role="cl-list"]');
    const clCount = root.querySelector('[data-role="cl-count"]');
    const clBar = root.querySelector('[data-role="cl-bar"]');

    function clUpdateProgress(done, total) {
        if (clCount) clCount.textContent = done + '/' + total;
        if (clBar) {
            clBar.parentElement.hidden = total === 0;
            clBar.style.width = (total ? Math.round(done / total * 100) : 0) + '%';
        }
    }
    function clRecount() {
        const total = clList.querySelectorAll('.tk-cl-item').length;
        const done = clList.querySelectorAll('.tk-cl-item.done').length;
        clUpdateProgress(done, total);
    }

    clList?.addEventListener('click', (e) => {
        const toggle = e.target.closest('[data-role="cl-toggle"]');
        if (toggle && !toggle.disabled) {
            const item = toggle.closest('.tk-cl-item');
            fetch(CL_BASE_URL + '/' + item.dataset.itemId, {
                method: 'PATCH',
                headers: { 'X-CSRF-TOKEN': CSRF, 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
            })
            .then(r => { if (!r.ok) throw new Error(); return r.json(); })
            .then(d => {
                item.classList.toggle('done', d.item.done);
                const meta = item.querySelector('[data-role="cl-meta"]');
                if (meta) meta.innerHTML = d.item.done
                    ? '<i class="fas fa-user-check"></i> ' + (d.item.done_by || '—') + ' · ' + (d.item.done_at || '')
                    : '';
                clUpdateProgress(d.progress.done, d.progress.total);
            })
            .catch(() => toast(false, 'Güncellenemedi'));
            return;
        }

        const del = e.target.closest('[data-role="cl-del"]');
        if (del) {
            const item = del.closest('.tk-cl-item');
            fetch(CL_BASE_URL + '/' + item.dataset.itemId, {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': CSRF, 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
            })
            .then(r => { if (!r.ok) throw new Error(); })
            .then(() => { item.remove(); clRecount(); })
            .catch(() => toast(false, 'Silinemedi'));
        }
    });

    const clInput = root.querySelector('[data-role="cl-input"]');
    const clAddBtn = root.querySelector('[data-role="cl-add"]');

    function clAdd() {
        const title = (clInput?.value || '').trim();
        if (!title) { clInput?.focus(); return; }
        clAddBtn.disabled = true;
        fetch(CL_STORE_URL, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
            body: JSON.stringify({ title })
        })
        .then(r => { if (!r.ok) throw new Error(); return r.json(); })
        .then(d => {
            const item = document.createElement('div');
            item.className = 'tk-cl-item';
            item.dataset.itemId = d.item.id;
            item.innerHTML =
                '<button type="button" class="tk-cl-check" data-role="cl-toggle"><i class="fas fa-check"></i></button>' +
                '<div class="tk-cl-body"><span class="tk-cl-title"></span><small class="tk-cl-meta" data-role="cl-meta"></small></div>' +
                '<button type="button" class="tk-cl-del" data-role="cl-del" title="Maddeyi sil"><i class="fas fa-xmark"></i></button>';
            item.querySelector('.tk-cl-title').textContent = d.item.title;
            clList.appendChild(item);
            clInput.value = '';
            clRecount();
        })
        .catch(() => toast(false, 'Madde eklenemedi'))
        .finally(() => { clAddBtn.disabled = false; });
    }

    clAddBtn?.addEventListener('click', clAdd);
    clInput?.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); clAdd(); } });

    // ── Alan güncellemeleri (öncelik, açıklama) ──
    root.querySelectorAll('[data-field]').forEach(el => {
        const evt = el.tagName === 'TEXTAREA' ? 'blur' : 'change';
        el.addEventListener(evt, () => {
            patch(UPDATE_FIELD_URL, { field: el.dataset.field, value: el.value })
                .then(() => toast(true, 'Kaydedildi'))
                .catch(() => toast(false, 'Kaydedilemedi'));
        });
    });

    // ── Son tarih: gün + isteğe bağlı saat, tek alan olarak gönderilir ──
    (function () {
        const day = root.querySelector('[data-role="due-date"]');
        const time = root.querySelector('[data-role="due-time"]');
        const chip = root.querySelector('[data-role="due-chip"]');
        const chipText = root.querySelector('[data-role="due-chip-text"]');
        if (!day || !time) return;

        function save() {
            if (!day.value && time.value) time.value = '';
            time.disabled = !day.value || day.disabled;

            const value = day.value ? (time.value ? `${day.value} ${time.value}` : day.value) : '';

            patch(UPDATE_FIELD_URL, { field: 'due_date', value })
                .then(res => {
                    if (chip) chip.hidden = !value;
                    if (chipText && res && res.due_label) chipText.textContent = res.due_label;
                    toast(true, 'Kaydedildi');
                })
                .catch(() => toast(false, 'Kaydedilemedi'));
        }

        day.addEventListener('change', save);
        time.addEventListener('change', save);
    })();

    // ── Zaman Tüneli: not ekleme / silme ──
    const COMMENTS_URL = "{{ route('agency.tasks.comments.store', $task) }}";
    const tlList = root.querySelector('[data-role="tl-list"]');
    const tlInput = root.querySelector('[data-role="tl-input"]');
    const tlSend = root.querySelector('[data-role="tl-send"]');
    const tlCount = root.querySelector('[data-role="tl-count"]');

    function tlBumpCount(delta) {
        if (tlCount) tlCount.textContent = Math.max(0, parseInt(tlCount.textContent || '0', 10) + delta);
    }

    // ── Composer: dosya ekleri + modül referansları ──
    const SEARCH_URL = "{{ route('agency.tasks.search-entities') }}";
    const tlChips = root.querySelector('[data-role="tl-chips"]');
    const tlFileInput = root.querySelector('[data-role="tl-file"]');
    const refPick = root.querySelector('[data-role="ref-pick"]');
    const refSearch = root.querySelector('[data-role="ref-search"]');
    const refResults = root.querySelector('[data-role="ref-results"]');
    let tlFiles = [], tlRefs = [];

    function tlRenderChips() {
        if (!tlChips) return;
        tlChips.innerHTML = '';
        tlFiles.forEach((f, i) => {
            const c = document.createElement('span');
            c.className = 'tk-tl-chip';
            c.innerHTML = '<i class="fas fa-paperclip"></i><span></span><i class="fas fa-xmark x"></i>';
            c.querySelector('span').textContent = f.name;
            c.querySelector('.x').addEventListener('click', () => { tlFiles.splice(i, 1); tlRenderChips(); });
            tlChips.appendChild(c);
        });
        tlRefs.forEach((r, i) => {
            const c = document.createElement('span');
            c.className = 'tk-tl-chip ref';
            c.innerHTML = '<i class="fas ' + (r.icon || 'fa-link') + '"></i><span></span><i class="fas fa-xmark x"></i>';
            c.querySelector('span').textContent = r.label;
            c.querySelector('.x').addEventListener('click', () => { tlRefs.splice(i, 1); tlRenderChips(); });
            tlChips.appendChild(c);
        });
    }

    root.querySelector('[data-role="tl-attach"]')?.addEventListener('click', () => tlFileInput?.click());
    tlFileInput?.addEventListener('change', (e) => {
        [...e.target.files].forEach(f => { if (tlFiles.length < 10) tlFiles.push(f); });
        tlFileInput.value = '';
        tlRenderChips();
    });

    root.querySelector('[data-role="tl-ref"]')?.addEventListener('click', () => {
        if (!refPick) return;
        refPick.hidden = !refPick.hidden;
        if (!refPick.hidden) setTimeout(() => refSearch?.focus(), 60);
    });
    root.querySelector('[data-role="ref-close"]')?.addEventListener('click', () => { if (refPick) refPick.hidden = true; });

    let refT = null;
    refSearch?.addEventListener('input', () => {
        const q = refSearch.value.trim();
        clearTimeout(refT);
        if (q.length < 2) { refResults.innerHTML = '<div class="tk-tl-refempty">Aramak için en az 2 karakter yazın.</div>'; return; }
        refResults.innerHTML = '<div class="tk-tl-refempty"><i class="fas fa-spinner fa-spin"></i> Aranıyor…</div>';
        refT = setTimeout(() => {
            fetch(SEARCH_URL + '?q=' + encodeURIComponent(q), { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                .then(r => r.json())
                .then(d => {
                    const items = d.items || [];
                    if (!items.length) { refResults.innerHTML = '<div class="tk-tl-refempty">Sonuç bulunamadı.</div>'; return; }
                    refResults.innerHTML = '';
                    items.forEach(it => {
                        const row = document.createElement('div');
                        row.className = 'tk-tl-refitem';
                        row.innerHTML = '<i class="fas ' + (it.icon || 'fa-link') + '"></i><div style="min-width:0;flex:1;"><b></b><small></small></div><span class="grp"></span>';
                        row.querySelector('b').textContent = it.label;
                        row.querySelector('small').textContent = it.sub || '';
                        row.querySelector('.grp').textContent = it.badge || it.group || '';
                        row.addEventListener('click', () => {
                            if (!tlRefs.find(r => r.key === it.key) && tlRefs.length < 6) {
                                tlRefs.push({ key: it.key, label: it.label, icon: it.icon });
                                tlRenderChips();
                            }
                            refPick.hidden = true;
                            refSearch.value = '';
                            refResults.innerHTML = '<div class="tk-tl-refempty">Aramak için en az 2 karakter yazın.</div>';
                        });
                        refResults.appendChild(row);
                    });
                })
                .catch(() => { refResults.innerHTML = '<div class="tk-tl-refempty">Arama başarısız.</div>'; });
        }, 250);
    });

    tlSend?.addEventListener('click', () => {
        const body = (tlInput.value || '').trim();
        if (!body && !tlFiles.length && !tlRefs.length) { tlInput.focus(); return; }
        tlSend.disabled = true;

        const fd = new FormData();
        fd.append('body', body);
        tlFiles.forEach(f => fd.append('attachments[]', f));
        if (tlRefs.length) fd.append('links', JSON.stringify(tlRefs.map(r => r.key)));

        fetch(COMMENTS_URL, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': CSRF, 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
            body: fd
        })
        .then(r => { if (!r.ok) throw new Error(); return r.json(); })
        .then(data => {
            const c = data.comment;
            const item = document.createElement('div');
            item.className = 'tk-tl-item';
            item.dataset.commentId = c.id;
            item.innerHTML =
                '<span class="tk-tl-dot"><span class="tk-avatar"></span></span>' +
                '<div class="tk-tl-card"><div class="tk-tl-head"><b></b><small></small>' +
                '<button type="button" class="tk-tl-del" data-role="tl-del" data-id="' + c.id + '" title="Notu sil"><i class="fas fa-xmark"></i></button>' +
                '</div><p></p><div class="tk-tl-atts"></div><div class="tk-tl-links"></div></div>';
            item.querySelector('.tk-avatar').textContent = c.initials;
            item.querySelector('b').textContent = c.author;
            item.querySelector('small').textContent = c.time;
            const p = item.querySelector('p');
            if (c.body) { p.textContent = c.body; } else { p.remove(); }

            const attsWrap = item.querySelector('.tk-tl-atts');
            (c.attachments || []).forEach(a => {
                const link = document.createElement('a');
                link.href = a.url;
                link.target = '_blank';
                if (a.kind === 'image') {
                    link.className = 'tk-tl-att-img';
                    const img = document.createElement('img');
                    img.src = a.url;
                    img.alt = a.name || '';
                    link.appendChild(img);
                } else {
                    link.className = 'tk-tl-att-file';
                    link.setAttribute('download', a.name || '');
                    link.innerHTML = '<i class="fas fa-file-lines"></i><span></span><small></small>';
                    link.querySelector('span').textContent = a.name || '';
                    link.querySelector('small').textContent = a.size || '';
                }
                attsWrap.appendChild(link);
            });
            if (!attsWrap.children.length) attsWrap.remove();

            const linksWrap = item.querySelector('.tk-tl-links');
            (c.links || []).forEach(l => {
                const chip = document.createElement('span');
                chip.className = 'tk-tl-link';
                const ic = document.createElement('i');
                ic.className = 'fas ' + (l.icon || 'fa-link');
                chip.appendChild(ic);
                chip.appendChild(document.createTextNode(l.label || ''));
                if (l.qv_url && typeof openQuickView === 'function') chip.addEventListener('click', () => openQuickView(l.qv_url));
                linksWrap.appendChild(chip);
            });
            if (!linksWrap.children.length) linksWrap.remove();

            tlList.prepend(item);
            tlInput.value = '';
            tlFiles = []; tlRefs = [];
            tlRenderChips();
            if (refPick) refPick.hidden = true;
            tlBumpCount(1);
            toast(true, 'Not eklendi');
        })
        .catch(() => toast(false, 'Not eklenemedi'))
        .finally(() => { tlSend.disabled = false; });
    });

    // Ctrl+Enter ile gönder
    tlInput?.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) { e.preventDefault(); tlSend?.click(); }
    });

    // Not silme (delege — sonradan eklenenler dahil)
    tlList?.addEventListener('click', (e) => {
        const btn = e.target.closest('[data-role="tl-del"]');
        if (!btn) return;

        appConfirm({
            title: 'Not silinsin mi?',
            text: 'Bu işlem geri alınamaz.',
            icon: 'warning',
            danger: true,
            confirmButtonText: 'Sil',
        }).then(ok => {
            if (!ok) return;
            fetch("{{ url('agency/tasks/' . $task->id) }}/comments/" + btn.dataset.id, {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': CSRF, 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
            })
            .then(r => { if (!r.ok) throw new Error(); })
            .then(() => {
                btn.closest('.tk-tl-item')?.remove();
                tlBumpCount(-1);
                toast(true, 'Not silindi');
            })
            .catch(() => toast(false, 'Not silinemedi'));
        });
    });

    // ── Arşivle / arşivden çıkar ──
    const ARCHIVE_URL = "{{ route('agency.tasks.archive', $task) }}";
    const UNARCHIVE_URL = "{{ route('agency.tasks.unarchive', $task) }}";

    function postAndRefresh(url, confirmOpts) {
        const run = () => fetch(url, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': CSRF, 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
        }).then(r => {
            if (!r.ok) throw new Error();
            if (typeof closeQuickView === 'function') closeQuickView();
            location.reload();
        }).catch(() => toast(false, 'İşlem başarısız'));

        if (confirmOpts) {
            appConfirm(confirmOpts).then(ok => { if (ok) run(); });
        } else {
            run();
        }
    }

    root.querySelector('[data-role="archive-btn"]')?.addEventListener('click', () =>
        postAndRefresh(ARCHIVE_URL, {
            title: 'Görev arşive alınsın mı?',
            text: 'Arşiv sayfasından dilediğinizde geri alabilirsiniz.',
            icon: 'question',
            confirmButtonText: 'Arşive Al',
        }));
    root.querySelector('[data-role="unarchive-btn"]')?.addEventListener('click', () =>
        postAndRefresh(UNARCHIVE_URL, null));

    // ── Atanan düzenleme ──
    const editBtn = root.querySelector('[data-role="edit-assignees"]');
    const editor = root.querySelector('[data-role="assignee-editor"]');
    editBtn?.addEventListener('click', () => {
        editor.style.display = editor.style.display === 'none' ? 'flex' : 'none';
    });
    root.querySelector('[data-role="save-assignees"]')?.addEventListener('click', () => {
        const ids = [...editor.querySelectorAll('input:checked')].map(i => parseInt(i.value, 10));
        patch(UPDATE_FIELD_URL, { field: 'assignees', value: ids }).then(() => {
            const list = root.querySelector('[data-role="assignee-list"]');
            list.innerHTML = '';
            editor.querySelectorAll('input:checked').forEach(input => {
                const name = input.nextElementSibling.textContent.trim();
                const initials = name.split(/\s+/).map(w => w[0]).join('').substring(0, 2).toUpperCase();
                const row = document.createElement('div');
                row.className = 'tk-qv-person';
                row.innerHTML = '<span class="tk-avatar"></span><span></span>';
                row.querySelector('.tk-avatar').textContent = initials;
                row.querySelectorAll('span')[1].textContent = name;
                list.appendChild(row);
            });
            editor.style.display = 'none';
            toast(true, 'Atananlar güncellendi');
        }).catch(() => toast(false, 'Atananlar güncellenemedi'));
    });
})();
</script>