@extends('layouts.portal')

@section('title', 'Daftar Penugasan - Portal Pegawai')

@section('content')
<div class="space-y-6">

    <!-- Header Section -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 tracking-tight flex items-center gap-2.5">
                <span>Tata Kelola Penugasan</span>
                @if($tab === 'tim')
                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold bg-orange-50 text-primary-700 border border-primary-200">
                        <i data-lucide="users" class="w-3.5 h-3.5"></i> Mode Atasan
                    </span>
                @else
                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold bg-slate-100 text-slate-700 border border-slate-200">
                        <i data-lucide="user-check" class="w-3.5 h-3.5"></i> Tugas Pribadi
                    </span>
                @endif
            </h1>
            <p class="text-sm text-slate-500 mt-1">
                @if($tab === 'tim')
                    Pantau dan kelola seluruh penugasan yang Anda delegasikan kepada bawahan langsung.
                @else
                    Daftar seluruh tanggung jawab dan tugas kolaboratif yang didelegasikan oleh atasan Anda.
                @endif
            </p>
        </div>

        @if($isAtasan)
        <div class="flex items-center gap-3">
            <a href="{{ route('portal.penugasan.create') }}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-primary-600 hover:bg-primary-700 text-white text-sm font-semibold rounded-xl shadow-sm hover:shadow transition-all group">
                <i data-lucide="plus-circle" class="w-4 h-4 group-hover:rotate-90 transition-transform"></i>
                <span>Buat Tugas Baru</span>
            </a>
        </div>
        @endif
    </div>

    <!-- Tab Switcher (Khusus Pegawai yang Memiliki Bawahan / Atasan) -->
    @if($isAtasan)
    <div class="border-b border-slate-200">
        <nav class="flex space-x-6" aria-label="Tabs">
            <a href="{{ route('portal.penugasan.index', array_merge(request()->except('tab', 'page'), ['tab' => 'saya'])) }}"
               class="py-3 px-1 border-b-2 font-semibold text-sm flex items-center gap-2 transition-colors {{ $tab === 'saya' ? 'border-primary-600 text-primary-600' : 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300' }}">
                <i data-lucide="user" class="w-4 h-4"></i>
                <span>Tugas Saya</span>
                <span class="ml-1.5 px-2 py-0.5 rounded-full text-xs {{ $tab === 'saya' ? 'bg-primary-100 text-primary-700' : 'bg-slate-100 text-slate-600' }}">
                    {{ $pegawai->penugasanDiterima()->count() }}
                </span>
            </a>

            <a href="{{ route('portal.penugasan.index', array_merge(request()->except('tab', 'page'), ['tab' => 'tim'])) }}"
               class="py-3 px-1 border-b-2 font-semibold text-sm flex items-center gap-2 transition-colors {{ $tab === 'tim' ? 'border-primary-600 text-primary-600' : 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300' }}">
                <i data-lucide="users" class="w-4 h-4"></i>
                <span>Tugas Tim (Bawahan)</span>
                <span class="ml-1.5 px-2 py-0.5 rounded-full text-xs {{ $tab === 'tim' ? 'bg-primary-100 text-primary-700' : 'bg-slate-100 text-slate-600' }}">
                    {{ \App\Models\Penugasan::where('atasan_id', $pegawai->id)->count() }}
                </span>
            </a>
        </nav>
    </div>
    @endif

    <!-- Filter & Pencarian Toolbar -->
    <div class="bg-white rounded-2xl p-4 border border-slate-200/80 shadow-sm">
        <form method="GET" action="{{ route('portal.penugasan.index') }}" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-3">
            <input type="hidden" name="tab" value="{{ $tab }}">

            <!-- Search Field -->
            <div class="lg:col-span-4 relative">
                <i data-lucide="search" class="w-4 h-4 absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400"></i>
                <input type="text" name="q" value="{{ request('q') }}" placeholder="Cari judul atau kode tugas..."
                       class="w-full pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all">
            </div>

            <!-- Status Filter -->
            <div class="lg:col-span-2">
                <select name="status" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 transition-all text-slate-700">
                    <option value="">Semua Status</option>
                    <option value="berjalan" {{ request('status') === 'berjalan' ? 'selected' : '' }}>Sedang Berjalan</option>
                    <option value="menunggu_review" {{ request('status') === 'menunggu_review' ? 'selected' : '' }}>Menunggu Review</option>
                    <option value="revisi" {{ request('status') === 'revisi' ? 'selected' : '' }}>Perlu Revisi</option>
                    <option value="selesai" {{ request('status') === 'selesai' ? 'selected' : '' }}>Selesai</option>
                </select>
            </div>

            <!-- Prioritas Filter -->
            <div class="lg:col-span-2">
                <select name="prioritas" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 transition-all text-slate-700">
                    <option value="">Semua Prioritas</option>
                    <option value="mendesak" {{ request('prioritas') === 'mendesak' ? 'selected' : '' }}>Mendesak</option>
                    <option value="tinggi" {{ request('prioritas') === 'tinggi' ? 'selected' : '' }}>Tinggi</option>
                    <option value="sedang" {{ request('prioritas') === 'sedang' ? 'selected' : '' }}>Sedang</option>
                    <option value="rendah" {{ request('prioritas') === 'rendah' ? 'selected' : '' }}>Rendah</option>
                </select>
            </div>

            <!-- Media Filter (Mencakup Spreadsheet, Google Docs, Upload Dokumen) -->
            <div class="lg:col-span-2">
                <select name="tipe_media" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 transition-all text-slate-700">
                    <option value="">Semua Media</option>
                    <option value="spreadsheet" {{ request('tipe_media') === 'spreadsheet' ? 'selected' : '' }}>Spreadsheet Online</option>
                    <option value="dokumen_online" {{ request('tipe_media') === 'dokumen_online' ? 'selected' : '' }}>Google Docs (Online)</option>
                    <option value="dokumen" {{ request('tipe_media') === 'dokumen' ? 'selected' : '' }}>Upload Dokumen</option>
                </select>
            </div>

            <!-- Action Buttons -->
            <div class="lg:col-span-2 flex items-center gap-2">
                <button type="submit" class="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2 bg-slate-900 hover:bg-slate-800 text-white text-sm font-semibold rounded-xl transition-all shadow-sm">
                    <i data-lucide="filter" class="w-3.5 h-3.5"></i>
                    <span>Filter</span>
                </button>
                @if(request()->anyFilled(['q', 'status', 'prioritas', 'tipe_media']))
                <a href="{{ route('portal.penugasan.index', ['tab' => $tab]) }}" class="px-2.5 py-2 bg-slate-100 hover:bg-slate-200 text-slate-600 rounded-xl transition-all text-sm font-medium" title="Reset Filter">
                    <i data-lucide="rotate-ccw" class="w-4 h-4"></i>
                </a>
                @endif
            </div>
        </form>
    </div>

    <!-- Task List Cards Grid -->
    @if($penugasanList->count() > 0)
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
        @foreach($penugasanList as $tugas)
        <div class="bg-white rounded-2xl border border-slate-200/90 hover:border-primary-300 shadow-sm hover:shadow-md transition-all flex flex-col justify-between overflow-hidden group">
            
            <!-- Card Body -->
            <div class="p-5 space-y-4">
                
                <!-- Header Card: Badges -->
                <div class="flex items-center justify-between gap-2">
                    <div class="flex items-center gap-1.5 flex-wrap">
                        <!-- Badge Media -->
                        @if($tugas->tipe_media === 'spreadsheet')
                            <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-md text-[11px] font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200">
                                <i data-lucide="sheet" class="w-3 h-3"></i> Spreadsheet
                            </span>
                        @elseif($tugas->tipe_media === 'dokumen_online')
                            <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-md text-[11px] font-semibold bg-blue-50 text-blue-700 border border-blue-200">
                                <i data-lucide="file-edit" class="w-3 h-3"></i> Google Docs
                            </span>
                        @else
                            <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-md text-[11px] font-semibold bg-primary-50 text-primary-700 border border-primary-200">
                                <i data-lucide="file-text" class="w-3 h-3"></i> Dokumen
                            </span>
                        @endif

                        <!-- Badge Prioritas -->
                        @php
                            $prioritasClasses = [
                                'rendah' => 'bg-slate-50 text-slate-600 border-slate-200',
                                'sedang' => 'bg-amber-50 text-amber-700 border-amber-200',
                                'tinggi' => 'bg-orange-50 text-orange-700 border-orange-200',
                                'mendesak' => 'bg-rose-50 text-rose-700 border-rose-200 font-bold',
                            ];
                        @endphp
                        <span class="inline-flex items-center px-2 py-0.5 rounded-md text-[11px] font-medium border {{ $prioritasClasses[$tugas->prioritas] ?? 'bg-slate-50 text-slate-600 border-slate-200' }}">
                            {{ ucfirst($tugas->prioritas) }}
                        </span>
                    </div>

                    <!-- Badge Status -->
                    @php
                        $statusClasses = [
                            'draft' => 'bg-slate-100 text-slate-700 border-slate-300',
                            'berjalan' => 'bg-blue-50 text-blue-700 border-blue-200',
                            'menunggu_review' => 'bg-amber-50 text-amber-700 border-amber-200',
                            'revisi' => 'bg-rose-50 text-rose-700 border-rose-200',
                            'selesai' => 'bg-emerald-50 text-emerald-700 border-emerald-200',
                            'dibatalkan' => 'bg-red-100 text-red-700 border-red-200',
                        ];
                    @endphp
                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold border {{ $statusClasses[$tugas->status] ?? 'bg-slate-100 text-slate-700 border-slate-300' }}">
                        <span class="w-1.5 h-1.5 rounded-full {{ in_array($tugas->status, ['berjalan', 'menunggu_review', 'revisi']) ? 'bg-current animate-pulse' : 'bg-current' }}"></span>
                        {{ $tugas->status_label }}
                    </span>
                </div>

                <!-- Judul & Kode -->
                <div>
                    <div class="text-[11px] font-mono font-medium text-slate-400 uppercase tracking-wider mb-1">
                        {{ $tugas->kode_penugasan }}
                    </div>
                    <a href="{{ route('portal.penugasan.show', $tugas->id) }}" class="text-base font-bold text-slate-900 group-hover:text-primary-600 line-clamp-2 transition-colors">
                        {{ $tugas->judul }}
                    </a>
                    @if($tugas->deskripsi)
                    <p class="text-xs text-slate-500 mt-1 line-clamp-2 leading-relaxed">
                        {{ $tugas->deskripsi }}
                    </p>
                    @endif
                </div>

                <!-- Info Atasan & Anggota Tim Kolaboratif -->
                <div class="pt-2 border-t border-slate-100 space-y-2 text-xs">
                    
                    @if($tab === 'saya')
                    <!-- Pemberi Tugas (Atasan) -->
                    <div class="flex items-center justify-between text-slate-500">
                        <span class="text-[11px]">Diberikan oleh:</span>
                        <div class="flex items-center gap-1.5 font-medium text-slate-800">
                            <i data-lucide="user-check" class="w-3.5 h-3.5 text-primary-600"></i>
                            <span>{{ $tugas->atasan?->nama_lengkap ?? 'Atasan Langsung' }}</span>
                        </div>
                    </div>
                    @endif

                    <!-- Anggota Kolaborator -->
                    <div class="flex items-center justify-between">
                        <span class="text-[11px] text-slate-500">Pelaksana:</span>
                        <div class="flex items-center -space-x-1.5">
                            @foreach($tugas->pegawais->take(4) as $anggota)
                            <div class="w-6 h-6 rounded-full bg-slate-200 border-2 border-white flex items-center justify-center text-[10px] font-bold text-slate-700 shadow-sm" title="{{ $anggota->nama_lengkap }} ({{ $anggota->jabatan?->nama_jabatan ?? 'Pegawai' }})">
                                {{ strtoupper(substr($anggota->nama_lengkap, 0, 1)) }}
                            </div>
                            @endforeach
                            @if($tugas->pegawais->count() > 4)
                            <div class="w-6 h-6 rounded-full bg-primary-100 border-2 border-white flex items-center justify-center text-[9px] font-bold text-primary-700 shadow-sm">
                                +{{ $tugas->pegawais->count() - 4 }}
                            </div>
                            @endif
                            <span class="text-[11px] font-medium text-slate-600 ml-2">
                                {{ $tugas->pegawais->count() }} Orang
                            </span>
                        </div>
                    </div>

                    <!-- Tenggat Waktu -->
                    <div class="flex items-center justify-between text-slate-500 pt-1">
                        <span class="text-[11px] flex items-center gap-1">
                            <i data-lucide="calendar" class="w-3.5 h-3.5 text-slate-400"></i> Tenggat:
                        </span>
                        <span class="font-semibold text-xs {{ $tugas->isTerlambat() ? 'text-rose-600 font-bold' : 'text-slate-700' }}">
                            {{ $tugas->tenggat_waktu ? $tugas->tenggat_waktu->format('d M Y') : 'Tidak ditentukan' }}
                            @if($tugas->isTerlambat())
                                <span class="text-[10px] px-1 py-0.2 rounded bg-rose-100 text-rose-700 ml-1">Terlambat</span>
                            @endif
                        </span>
                    </div>

                </div>

            </div>

            <!-- Card Footer -->
            <div class="px-5 py-3 bg-slate-50/70 border-t border-slate-100 flex items-center justify-between">
                <span class="text-[11px] text-slate-400">
                    Dibuat {{ $tugas->created_at->diffForHumans() }}
                </span>
                <a href="{{ route('portal.penugasan.show', $tugas->id) }}" class="inline-flex items-center gap-1.5 text-xs font-semibold text-primary-600 hover:text-primary-700 group-hover:translate-x-0.5 transition-all">
                    <span>Detail Tugas</span>
                    <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
                </a>
            </div>

        </div>
        @endforeach
    </div>

    <!-- Pagination -->
    <div class="mt-6">
        {{ $penugasanList->links() }}
    </div>

    @else
    <!-- Empty State -->
    <div class="bg-white rounded-2xl border border-slate-200/80 p-12 text-center shadow-sm">
        <div class="w-16 h-16 rounded-2xl bg-slate-100 text-slate-400 flex items-center justify-center mx-auto mb-4">
            <i data-lucide="inbox" class="w-8 h-8"></i>
        </div>
        <h3 class="text-base font-bold text-slate-800">Belum Ada Penugasan</h3>
        <p class="text-sm text-slate-500 max-w-md mx-auto mt-1">
            @if(request()->anyFilled(['q', 'status', 'prioritas', 'tipe_media']))
                Tidak ditemukan penugasan yang sesuai dengan filter pencarian Anda. Coba ubah kata kunci atau reset filter.
            @elseif($tab === 'tim')
                Anda belum memberikan penugasan apapun kepada tim/bawahan Anda. Klik tombol di bawah untuk membuat penugasan baru.
            @else
                Saat ini Anda belum memiliki tugas yang ditugaskan oleh atasan langsung Anda.
            @endif
        </p>
        
        <div class="mt-6 flex items-center justify-center gap-3">
            @if(request()->anyFilled(['q', 'status', 'prioritas', 'tipe_media']))
                <a href="{{ route('portal.penugasan.index', ['tab' => $tab]) }}" class="inline-flex items-center gap-2 px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold rounded-xl text-sm transition-all">
                    <i data-lucide="rotate-ccw" class="w-4 h-4"></i> Reset Filter
                </a>
            @elseif($tab === 'tim' && $isAtasan)
                <a href="{{ route('portal.penugasan.create') }}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-xl text-sm shadow-sm transition-all">
                    <i data-lucide="plus-circle" class="w-4 h-4"></i> Buat Tugas Baru
                </a>
            @endif
        </div>
    </div>
    @endif

</div>
@endsection