@extends('agency.layouts.app')

@section('title', 'Görev Arşivi')
@section('page_title', 'Görev Arşivi')

@php
    $breadcrumbs = [
        ['title' => 'Dashboard', 'url' => route('agency.dashboard')],
        ['title' => 'Görevler', 'url' => route('agency.tasks.index')],
        ['title' => 'Arşiv', 'url' => ''],
    ];

    $dtColumns = [
        ['key' => 'title', 'label' => 'Görev', 'sortable' => false],
        ['key' => 'assignees', 'label' => 'Atananlar'],
        ['key' => 'status', 'label' => 'Durum', 'align' => 'center', 'width' => '120px'],
        ['key' => 'archived_at', 'label' => 'Arşivlenme', 'width' => '170px'],
        ['key' => 'archived_by', 'label' => 'Arşivleyen', 'width' => '160px'],
        ['key' => '_actions', 'label' => '', 'fixed' => true, 'align' => 'end', 'width' => '90px'],
    ];
@endphp

@section('content')
<div class="tka-page">
    <x-data-table
        module="tasks-archive"
        title="Görev Arşivi" subtitle="Arşive alınan görevler — dilediğinizde geri alabilirsiniz" icon="fa-box-archive"
        :columns="$dtColumns"
        :search="request('search', '')"
        search-placeholder="Arşivde ara…"
        :paginator="$tasks"
        :per-page-options="[10, 25, 50, 100]">

        <x-slot:headerActions>
            <a href="{{ route('agency.tasks.index') }}" class="tka-back">
                <i class="fas fa-arrow-left"></i> Görevlere Dön
            </a>
        </x-slot:headerActions>

        @forelse($tasks as $task)
            <tr data-quickview-url="{{ route('agency.tasks.quick-view', $task) }}" style="cursor:pointer">
                <td data-col="title">
                    <div class="dt-cell-main d-flex align-items-center gap-2">
                        @if($task->is_auto)
                            <i class="fas fa-robot" style="color:#7c3aed; font-size:.75rem;" title="Sistem tarafından oluşturuldu"></i>
                        @endif
                        <span>{{ \Illuminate\Support\Str::limit($task->title, 70) }}</span>
                    </div>
                    @if($task->description)
                        <div class="dt-cell-sub">{{ \Illuminate\Support\Str::limit(strip_tags($task->description), 80) }}</div>
                    @endif
                </td>
                <td data-col="assignees">
                    <div class="tk-people">
                        @foreach($task->assignees->take(3) as $user)
                            <span class="tk-person"><span class="tk-avatar">{{ $user->initials }}</span>{{ $user->full_name }}</span>
                        @endforeach
                        @if($task->assignees->count() > 3)
                            <span class="tk-person more">+{{ $task->assignees->count() - 3 }}</span>
                        @endif
                    </div>
                </td>
                <td data-col="status" class="text-center">
                    <span class="tk-badge" style="background: {{ $task->statusMeta()['color'] }}18; color: {{ $task->statusMeta()['color'] }};">
                        {{ $task->statusMeta()['label'] }}
                    </span>
                </td>
                <td data-col="archived_at">
                    <span class="dt-cell-sub">{{ $task->archived_at?->translatedFormat('d M Y, H:i') }}</span>
                </td>
                <td data-col="archived_by">
                    <span class="dt-cell-sub">{{ $task->archiver?->full_name ?? '—' }}</span>
                </td>
                <td data-col="_actions" class="text-end">
                    <div class="dt-rowact">
                        @if($canAssign || $task->created_by === auth()->id())
                            <button type="button" class="dt-iconbtn success" title="Arşivden Çıkar"
                                    onclick="event.stopPropagation(); tkaUnarchive({{ $task->id }}, this)">
                                <i class="fas fa-rotate-left"></i>
                            </button>
                        @endif
                    </div>
                </td>
            </tr>
        @empty
            <tr>
                <td colspan="100">
                    <div class="dt-empty">
                        <i class="fas fa-box-open"></i>
                        <h4>Arşiv boş</h4>
                        <p>Arşive alınan görevler burada listelenir.</p>
                    </div>
                </td>
            </tr>
        @endforelse
    </x-data-table>
</div>
@endsection

@push('styles')
<style>
    .tka-back {
        display: inline-flex; align-items: center; gap: .45rem; text-decoration: none;
        border: 1px solid #e2e8f0; background: #fff; color: #64748b;
        font-weight: 800; font-size: .8rem; padding: .5rem .85rem; border-radius: 11px; transition: all .15s ease;
    }
    .tka-back:hover { border-color: #cbd5e1; color: #334155; background: #f8fafc; }

    /* Ortak görev rozet/kişi stilleri (arşiv sayfası bağımsız yüklenir) */
    .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-people { display: flex; flex-wrap: wrap; gap: .3rem; }
    .tk-person {
        display: inline-flex; align-items: center; gap: .38rem; max-width: 100%;
        font-size: .72rem; font-weight: 700; color: #475569;
        background: #f8fafc; border: 1px solid #eef1f6; border-radius: 999px;
        padding: .13rem .6rem .13rem .16rem; white-space: nowrap;
    }
    .tk-person .tk-avatar {
        width: 20px; height: 20px; border-radius: 50%; background: #e2e8f0; color: #475569;
        font-size: .54rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
    }
    .tk-person.more { padding: .13rem .6rem; color: #92400e; background: #fef3c7; border-color: #fde68a; }
</style>
@endpush

@push('scripts')
<script>
    function tkaUnarchive(id, btn) {
        btn.disabled = true;
        fetch(`{{ url('agency/tasks') }}/${id}/unarchive`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        }).then(r => {
            if (!r.ok) throw new Error();
            location.reload();
        }).catch(() => { btn.disabled = false; appToast('error', 'Görev arşivden çıkarılamadı'); });
    }
</script>
@endpush