@extends('agency.layouts.app')

@section('title', 'Görevler')
@section('page_title', 'Görevler')

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

    $switcherParams = fn (string $v) => array_merge(request()->except(['view', 'page']), ['view' => $v]);
@endphp

@section('content')
<div class="tk-page" id="tkPage">

    {{-- ── Üst şerit: istatistikler + görünüm anahtarı + yeni görev ── --}}
    <div class="tk-topbar">
        <div class="tk-stats">
            <a href="{{ route('agency.tasks.index', ['filter' => 'pending']) }}" class="tk-stat">
                <span class="tk-stat-ico tk-ico-amber"><i class="fas fa-hourglass-half"></i></span>
                <span class="tk-stat-body">
                    <b data-tk-count="pending">{{ $stats['pending'] }}</b>
                    <small>Bekleyen</small>
                </span>
            </a>
            <a href="{{ route('agency.tasks.index', ['filter' => 'overdue']) }}" class="tk-stat {{ $stats['overdue'] > 0 ? 'tk-stat-alert' : '' }}">
                <span class="tk-stat-ico tk-ico-red"><i class="fas fa-fire"></i></span>
                <span class="tk-stat-body">
                    <b data-tk-count="overdue">{{ $stats['overdue'] }}</b>
                    <small>Süresi Geçen</small>
                </span>
            </a>
            <a href="{{ route('agency.tasks.index', ['filter' => 'completed']) }}" class="tk-stat">
                <span class="tk-stat-ico tk-ico-green"><i class="fas fa-circle-check"></i></span>
                <span class="tk-stat-body">
                    <b data-tk-count="completed_today">{{ $stats['completed_today'] }}</b>
                    <small>Bugün Tamamlanan</small>
                </span>
            </a>
        </div>

        <div class="tk-top-actions">
            <nav class="tk-switch" aria-label="Görünüm">
                <a href="{{ route('agency.tasks.index', $switcherParams('kanban')) }}" class="tk-switch-btn {{ $view === 'kanban' ? 'on' : '' }}">
                    <i class="fas fa-table-columns"></i><span>Kanban</span>
                </a>
                <a href="{{ route('agency.tasks.index', $switcherParams('time')) }}" class="tk-switch-btn {{ $view === 'time' ? 'on' : '' }}">
                    <i class="fas fa-clock"></i><span>Zaman</span>
                </a>
                <a href="{{ route('agency.tasks.index', $switcherParams('calendar')) }}" class="tk-switch-btn {{ $view === 'calendar' ? 'on' : '' }}">
                    <i class="fas fa-calendar-days"></i><span>Takvim</span>
                </a>
                <a href="{{ route('agency.tasks.index', $switcherParams('table')) }}" class="tk-switch-btn {{ $view === 'table' ? 'on' : '' }}">
                    <i class="fas fa-table-list"></i><span>Tablo</span>
                </a>
            </nav>

            <a href="{{ route('agency.tasks.archived') }}" class="tk-archive-link" title="Arşivlenen görevler">
                <i class="fas fa-box-archive"></i><span>Arşiv</span>
            </a>

            <button type="button" class="tk-new-btn" onclick="openTaskCreateModal()">
                <i class="fas fa-plus"></i> Yeni Görev
            </button>
        </div>
    </div>

    {{-- ── Filtre çubuğu (tablo görünümü filtrelerini x-data-table taşır) ── --}}
    @if($view !== 'table')
        <form method="GET" action="{{ route('agency.tasks.index') }}" class="tk-filters" id="tkFilterForm">
            <input type="hidden" name="view" value="{{ $view }}">

            @if($canViewAll)
                <div class="tk-scope">
                    <label class="tk-scope-opt {{ request('scope', 'mine') === 'mine' ? 'on' : '' }}">
                        <input type="radio" name="scope" value="mine" {{ request('scope', 'mine') === 'mine' ? 'checked' : '' }}>
                        <i class="fas fa-user"></i> Görevlerim
                    </label>
                    <label class="tk-scope-opt {{ request('scope') === 'all' ? 'on' : '' }}">
                        <input type="radio" name="scope" value="all" {{ request('scope') === 'all' ? 'checked' : '' }}>
                        <i class="fas fa-users"></i> Tüm Acente
                    </label>
                </div>
            @endif

            <select name="priority" class="tk-flt">
                <option value="">Öncelik: Tümü</option>
                @foreach(\App\Models\Task\Task::PRIORITIES as $key => $meta)
                    <option value="{{ $key }}" {{ request('priority') === $key ? 'selected' : '' }}>{{ $meta['label'] }}</option>
                @endforeach
            </select>

            @if($view === 'calendar')
                <select name="status" class="tk-flt">
                    <option value="">Durum: Tümü</option>
                    @foreach(\App\Models\Task\Task::STATUSES as $key => $meta)
                        <option value="{{ $key }}" {{ request('status') === $key ? 'selected' : '' }}>{{ $meta['label'] }}</option>
                    @endforeach
                </select>
            @endif

            @if($canViewAll)
                <select name="assignee" class="tk-flt">
                    <option value="">Atanan: Tümü</option>
                    @foreach($staffUsers as $su)
                        <option value="{{ $su->id }}" {{ (string) request('assignee') === (string) $su->id ? 'selected' : '' }}>{{ $su->full_name }}</option>
                    @endforeach
                </select>
            @endif

            <div class="tk-search">
                <i class="fas fa-magnifying-glass"></i>
                <input type="text" name="q" value="{{ request('q', '') }}" placeholder="Görevlerde ara…">
            </div>

            @if(request()->hasAny(['priority', 'assignee', 'q', 'status', 'filter']) && (request('priority') || request('assignee') || request('q') || request('status') || request('filter')))
                <a href="{{ route('agency.tasks.index', ['view' => $view]) }}" class="tk-flt-clear" title="Filtreleri temizle">
                    <i class="fas fa-xmark"></i> Temizle
                </a>
            @endif
        </form>
    @endif

    @include('agency.tasks.partials.' . $view)
</div>

@include('agency.tasks.partials.create-modal')
@endsection

@push('styles')
<style>
    /* ═══ Görev modülü — kehribar (amber) vurgu ═══ */
    .tk-page { --tk: #d97706; --tk-soft: #fef3c7; --tk-bg: #fffbeb; --tk-dark: #92400e; }

    /* Üst şerit */
    .tk-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
    .tk-stats { display: flex; gap: .65rem; flex-wrap: wrap; }
    .tk-stat {
        display: flex; align-items: center; gap: .7rem; text-decoration: none;
        background: #fff; border: 1px solid #e9edf3; border-radius: 14px; padding: .55rem .95rem .55rem .6rem;
        transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    }
    .tk-stat:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(15,23,42,.15); border-color: #dbe2ec; }
    .tk-stat-ico {
        width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: .95rem;
    }
    .tk-ico-amber { background: #fef3c7; color: #d97706; }
    .tk-ico-red   { background: #fee2e2; color: #ef4444; }
    .tk-ico-green { background: #dcfce7; color: #16a34a; }
    .tk-stat-body { display: flex; flex-direction: column; line-height: 1.1; }
    .tk-stat-body b { font-size: 1.15rem; font-weight: 800; color: #0f172a; letter-spacing: -0.02em; }
    .tk-stat-body small { font-size: .7rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; }
    .tk-stat-alert { border-color: #fecaca; background: #fff7f7; }
    .tk-stat-alert .tk-stat-body b { color: #dc2626; }

    .tk-top-actions { display: flex; align-items: center; gap: .75rem; }

    /* Segmentli görünüm anahtarı */
    .tk-switch { display: inline-flex; background: #eef1f6; border: 1px solid #e2e8f0; border-radius: 12px; padding: 3px; gap: 2px; }
    .tk-switch-btn {
        display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .85rem; border-radius: 9px;
        font-size: .82rem; font-weight: 700; color: #64748b; text-decoration: none; transition: all .18s ease;
    }
    .tk-switch-btn i { font-size: .8rem; }
    .tk-switch-btn:hover { color: #1e293b; }
    .tk-switch-btn.on { background: #fff; color: var(--tk-dark); box-shadow: 0 2px 8px rgba(15,23,42,.08); }
    .tk-switch-btn.on i { color: var(--tk); }

    /* Yeşil aksiyon kimliği doğrudan burada tanımlıdır: green-actions.js
       .btn-action-green sınıfını ancak DOMContentLoaded'da eklediğinden,
       turuncu bir başlangıç rengi sayfa ilk boyandığında bir an görünüp
       yeşile dönüyordu (renk sıçraması). */
    .tk-new-btn {
        display: inline-flex; align-items: center; gap: .5rem; border: none; cursor: pointer;
        background: linear-gradient(135deg, #10b981, #34d399); color: #fff;
        font-weight: 800; font-size: .85rem; padding: .55rem 1.1rem; border-radius: 12px;
        box-shadow: 0 6px 16px -6px rgba(16,185,129,.55); transition: transform .15s ease, filter .15s ease;
    }
    .tk-new-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }

    .tk-archive-link {
        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: 12px;
        transition: all .15s ease;
    }
    .tk-archive-link:hover { border-color: #cbd5e1; color: #334155; background: #f8fafc; }

    /* Filtre çubuğu */
    .tk-filters {
        display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
        background: #fff; border: 1px solid #e9edf3; border-radius: 14px; padding: .6rem .75rem; margin-bottom: 1rem;
    }
    .tk-scope { display: inline-flex; background: #f1f5f9; border-radius: 10px; padding: 3px; gap: 2px; }
    .tk-scope-opt {
        display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: 8px;
        font-size: .78rem; font-weight: 700; color: #64748b; cursor: pointer; margin: 0; transition: all .15s ease;
    }
    .tk-scope-opt input { display: none; }
    .tk-scope-opt.on { background: #fff; color: var(--tk-dark); box-shadow: 0 1px 4px rgba(15,23,42,.08); }
    .tk-flt {
        border: 1px solid #e2e8f0; border-radius: 10px; padding: .42rem .65rem; font-size: .82rem; font-weight: 600;
        color: #334155; background: #fff; min-width: 140px;
    }
    .tk-flt:focus { outline: none; border-color: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,.18); }
    .tk-search { position: relative; flex: 1; min-width: 180px; max-width: 320px; }
    .tk-search i { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: .78rem; }
    .tk-search input {
        width: 100%; border: 1px solid #e2e8f0; border-radius: 10px; padding: .42rem .65rem .42rem 2rem;
        font-size: .82rem; color: #334155;
    }
    .tk-search input:focus { outline: none; border-color: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,.18); }
    .tk-flt-clear {
        display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700;
        color: #ef4444; text-decoration: none; padding: .35rem .6rem; border-radius: 8px;
    }
    .tk-flt-clear:hover { background: #fee2e2; color: #dc2626; }

    /* Ortak: öncelik / durum rozetleri, avatarlar, ilişki chip'leri */
    .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-avatars { display: inline-flex; }
    .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; margin-left: -7px;
    }
    .tk-avatar:first-child { margin-left: 0; }
    .tk-avatar.more { background: #fef3c7; color: #92400e; }

    /* Atananlar: avatar + AD SOYAD birlikte */
    .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; font-size: .54rem; border: none; margin: 0; flex-shrink: 0; }
    .tk-person.more { padding: .13rem .6rem; color: #92400e; background: #fef3c7; border-color: #fde68a; }
    .tk-relchip {
        display: inline-flex; align-items: center; gap: .32rem; max-width: 180px; overflow: hidden;
        font-size: .7rem; font-weight: 700; color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0;
        padding: .16rem .5rem; border-radius: 7px; white-space: nowrap; text-overflow: ellipsis; cursor: pointer;
        transition: all .15s ease;
    }
    .tk-relchip i { font-size: .62rem; color: #94a3b8; }
    .tk-relchip:hover { background: var(--tk-soft, #fef3c7); border-color: #fde68a; color: #92400e; }
    .tk-relchip:hover i { color: #d97706; }
    .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-due { display: inline-flex; align-items: center; gap: .32rem; font-size: .72rem; font-weight: 700; color: #64748b; }
    .tk-due.over { color: #dc2626; }
    .tk-due.over i { animation: tkPulse 1.6s ease-in-out infinite; }
    @keyframes tkPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

    @media (max-width: 768px) {
        .tk-topbar { flex-direction: column; align-items: stretch; }
        .tk-top-actions { justify-content: space-between; }
        .tk-switch-btn span { display: none; }
    }
</style>
@endpush

@push('scripts')
<script>
    // Filtre değişince otomatik gönder
    document.querySelectorAll('#tkFilterForm select, #tkFilterForm input[type="radio"]').forEach(el => {
        el.addEventListener('change', () => document.getElementById('tkFilterForm').submit());
    });
    // Arama: Enter ile
    document.querySelector('#tkFilterForm .tk-search input')?.addEventListener('keydown', e => {
        if (e.key === 'Enter') { e.preventDefault(); document.getElementById('tkFilterForm').submit(); }
    });

    // ?new=1 → oluşturma modalını otomatik aç
    if (new URLSearchParams(location.search).get('new') === '1') {
        window.addEventListener('load', () => setTimeout(() => openTaskCreateModal(), 150));
    }
</script>
@endpush