@extends('layouts.portal')

@section('title', $penugasan->judul . ' - Detail Penugasan')

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

    <!-- Breadcrumb & Top Bar -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div class="flex items-center gap-2 text-sm">
            <a href="{{ route('portal.penugasan.index', ['tab' => $isAtasanTugas ? 'tim' : 'saya']) }}" class="inline-flex items-center gap-1.5 font-semibold text-slate-500 hover:text-slate-800 transition-colors">
                <i data-lucide="arrow-left" class="w-4 h-4"></i>
                <span>Kembali ke Daftar</span>
            </a>
            <span class="text-slate-300">/</span>
            <span class="font-mono text-xs font-semibold text-slate-500 bg-slate-100 px-2 py-0.5 rounded">
                {{ $penugasan->kode_penugasan }}
            </span>
        </div>

        <!-- Role Badge -->
        <div class="flex items-center gap-2">
            @if($isAtasanTugas)
                <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-orange-50 text-primary-700 border border-primary-200">
                    <i data-lucide="shield-check" class="w-3.5 h-3.5"></i> Anda adalah Atasan (Pemberi Tugas)
                </span>
            @elseif($isAnggotaTugas)
                <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">
                    <i data-lucide="user-check" class="w-3.5 h-3.5"></i> 
                    {{ $anggotaSaya?->peran === 'penanggung_jawab' ? 'Penanggung Jawab Utama' : 'Anggota Kolaborator' }}
                </span>
            @endif
        </div>
    </div>

    <!-- Alert Status Penugasan Tertentu (Revisi / Menunggu Review / Selesai) -->
    @if($penugasan->status === 'menunggu_review')
    <div class="bg-amber-50 border border-amber-200 rounded-2xl p-4 flex items-start gap-3 shadow-sm">
        <div class="w-9 h-9 rounded-xl bg-amber-100 text-amber-700 flex items-center justify-center shrink-0">
            <i data-lucide="clock" class="w-5 h-5"></i>
        </div>
        <div class="flex-1">
            <h4 class="text-sm font-bold text-amber-900">Menunggu Evaluasi & Review Atasan</h4>
            <p class="text-xs text-amber-700 mt-0.5">
                Tim pelaksana telah menyelesaikan pengerjaan dan mengajukan penugasan ini. 
                @if($isAtasanTugas)
                    Silakan periksa hasil pekerjaan pada tautan di bawah dan berikan keputusan evaluasi.
                @else
                    Tugas saat ini sedang diperiksa oleh atasan langsung Anda.
                @endif
            </p>
        </div>
    </div>
    @elseif($penugasan->status === 'revisi')
    <div class="bg-rose-50 border border-rose-200 rounded-2xl p-4 flex items-start gap-3 shadow-sm">
        <div class="w-9 h-9 rounded-xl bg-rose-100 text-rose-700 flex items-center justify-center shrink-0">
            <i data-lucide="alert-triangle" class="w-5 h-5"></i>
        </div>
        <div class="flex-1">
            <h4 class="text-sm font-bold text-rose-900">Tugas Memerlukan Perbaikan / Revisi</h4>
            @if($penugasan->catatan_atasan)
                <div class="mt-1.5 p-3 bg-white/80 rounded-xl border border-rose-100 text-xs text-rose-800 font-medium">
                    <span class="font-bold text-rose-900 block mb-0.5">Catatan Instruksi dari Atasan:</span>
                    {!! nl2br(e($penugasan->catatan_atasan)) !!}
                </div>
            @endif
            <p class="text-xs text-rose-600 mt-1.5">
                Perbaiki bagian yang diminta pada dokumen/spreadsheet pengerjaan, lalu ajukan kembali untuk direview setelah selesai.
            </p>
        </div>
    </div>
    @elseif($penugasan->status === 'selesai')
    <div class="bg-emerald-50 border border-emerald-200 rounded-2xl p-4 flex items-start gap-3 shadow-sm">
        <div class="w-9 h-9 rounded-xl bg-emerald-100 text-emerald-700 flex items-center justify-center shrink-0">
            <i data-lucide="check-circle-2" class="w-5 h-5"></i>
        </div>
        <div class="flex-1">
            <h4 class="text-sm font-bold text-emerald-900">Penugasan Berhasil Diselesaikan</h4>
            <p class="text-xs text-emerald-700 mt-0.5">
                Tugas ini telah diverifikasi dan disetujui oleh {{ $penugasan->atasan?->nama_lengkap ?? 'Atasan' }}
                @if($penugasan->selesai_at) pada {{ $penugasan->selesai_at->format('d M Y H:i WIB') }} @endif.
            </p>
            @if($penugasan->catatan_atasan)
                <div class="mt-2 text-xs text-emerald-800 bg-white/70 p-2.5 rounded-lg border border-emerald-100">
                    <span class="font-bold">Apresiasi/Catatan:</span> {{ $penugasan->catatan_atasan }}
                </div>
            @endif
        </div>
    </div>
    @endif

    <!-- Main Header Card: Detail Tugas & Anggota -->
    <div class="bg-white rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-6">
        
        <!-- Header Info Bar -->
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 border-b border-slate-100 pb-5">
            <div class="space-y-2">
                <div class="flex items-center gap-2 flex-wrap">
                    <!-- Media Badge -->
                    @if($penugasan->tipe_media === 'spreadsheet')
                        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-md text-xs font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">
                            <i data-lucide="sheet" class="w-4 h-4"></i> Google Spreadsheet
                        </span>
                    @elseif($penugasan->tipe_media === 'dokumen_online')
                        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-md text-xs font-bold bg-blue-50 text-blue-700 border border-blue-200">
                            <i data-lucide="file-edit" class="w-4 h-4"></i> Google Docs
                        </span>
                    @else
                        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-md text-xs font-bold bg-orange-50 text-primary-700 border border-primary-200">
                            <i data-lucide="file-text" class="w-4 h-4"></i> Upload Dokumen Saja
                        </span>
                    @endif

                    <!-- Prioritas Badge -->
                    @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.5 py-1 rounded-md text-xs font-medium border {{ $prioritasClasses[$penugasan->prioritas] ?? 'bg-slate-50 text-slate-600 border-slate-200' }}">
                        Prioritas: {{ ucfirst($penugasan->prioritas) }}
                    </span>

                    <!-- Status Badge -->
                    @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.5 px-3 py-1 rounded-full text-xs font-semibold border {{ $statusClasses[$penugasan->status] ?? 'bg-slate-100 text-slate-700 border-slate-300' }}">
                        <span class="w-1.5 h-1.5 rounded-full {{ in_array($penugasan->status, ['berjalan', 'menunggu_review', 'revisi']) ? 'bg-current animate-pulse' : 'bg-current' }}"></span>
                        {{ $penugasan->status_label }}
                    </span>
                </div>

                <h1 class="text-xl md:text-2xl font-bold text-slate-900 tracking-tight">
                    {{ $penugasan->judul }}
                </h1>
            </div>

            <!-- Panel Tombol Aksi Workflow (Bawahan / Atasan) -->
            <div class="flex items-center gap-2 flex-wrap">
                <!-- Aksi Bawahan (Pelaksana) -->
                @if($isAnggotaTugas && $penugasan->status !== 'selesai' && $penugasan->status !== 'dibatalkan')
                    @if($anggotaSaya?->status_kontribusi === 'belum_mulai')
                        <form action="{{ route('portal.penugasan.update-status', $penugasan->id) }}" method="POST">
                            @csrf
                            <input type="hidden" name="aksi" value="mulai">
                            <button type="submit" class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-blue-600 hover:bg-blue-700 text-white text-xs font-bold shadow-sm transition-all">
                                <i data-lucide="play" class="w-4 h-4"></i>
                                <span>Mulai Kerjakan Tugas</span>
                            </button>
                        </form>
                    @elseif($penugasan->status !== 'menunggu_review')
                        <form action="{{ route('portal.penugasan.update-status', $penugasan->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin seluruh hasil pekerjaan sudah lengkap dan siap direview oleh atasan?');">
                            @csrf
                            <input type="hidden" name="aksi" value="serahkan">
                            <button type="submit" class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold shadow-sm transition-all">
                                <i data-lucide="send" class="w-4 h-4"></i>
                                <span>Ajukan untuk Direview</span>
                            </button>
                        </form>
                    @endif
                @endif

                <!-- Aksi Atasan (Review / Verifikasi) -->
                @if($isAtasanTugas && $penugasan->status !== 'selesai' && $penugasan->status !== 'dibatalkan')
                    <button type="button" onclick="openReviewModal('setujui')" class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold shadow-sm transition-all">
                        <i data-lucide="check-circle" class="w-4 h-4"></i>
                        <span>Setujui (Selesai)</span>
                    </button>
                    <button type="button" onclick="openReviewModal('revisi')" class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-rose-600 hover:bg-rose-700 text-white text-xs font-bold shadow-sm transition-all">
                        <i data-lucide="rotate-ccw" class="w-4 h-4"></i>
                        <span>Minta Revisi</span>
                    </button>
                @endif
            </div>
        </div>

        <!-- Deskripsi Tugas -->
        @if($penugasan->deskripsi)
        <div class="bg-slate-50/80 rounded-xl p-4 border border-slate-200/70">
            <div class="text-xs font-bold text-slate-700 uppercase tracking-wider mb-1 flex items-center gap-1.5">
                <i data-lucide="align-left" class="w-3.5 h-3.5 text-slate-400"></i>
                <span>Deskripsi & Arahan Kerja</span>
            </div>
            <div class="text-sm text-slate-600 leading-relaxed whitespace-pre-line">
                {{ $penugasan->deskripsi }}
            </div>
        </div>
        @endif

        <!-- Meta Grid: Pemberi Tugas, Tenggat, Tim Pelaksana -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 pt-1">
            
            <!-- Atasan Pemberi Tugas -->
            <div class="p-3.5 bg-slate-50 rounded-xl border border-slate-200/70">
                <div class="text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-2">Pemberi Tugas (Atasan)</div>
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full bg-primary-100 text-primary-700 font-bold text-sm flex items-center justify-center shrink-0">
                        {{ strtoupper(substr($penugasan->atasan?->nama_lengkap ?? 'A', 0, 1)) }}
                    </div>
                    <div class="min-w-0">
                        <div class="text-xs font-bold text-slate-800 truncate">{{ $penugasan->atasan?->nama_lengkap }}</div>
                        <div class="text-[11px] text-slate-500 truncate">{{ $penugasan->atasan?->jabatan?->nama_jabatan ?? 'Atasan Langsung' }}</div>
                    </div>
                </div>
            </div>

            <!-- Waktu & Tenggat -->
            <div class="p-3.5 bg-slate-50 rounded-xl border border-slate-200/70">
                <div class="text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-2">Jadwal & Batas Waktu</div>
                <div class="space-y-1 text-xs">
                    <div class="flex items-center justify-between text-slate-600">
                        <span class="text-slate-400">Mulai:</span>
                        <span class="font-medium">{{ $penugasan->tanggal_mulai ? $penugasan->tanggal_mulai->format('d M Y') : '-' }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-slate-400">Tenggat:</span>
                        <span class="font-bold {{ $penugasan->isTerlambat() ? 'text-rose-600' : 'text-slate-800' }}">
                            {{ $penugasan->tenggat_waktu ? $penugasan->tenggat_waktu->format('d M Y') : 'Tidak ditentukan' }}
                            @if($penugasan->isTerlambat())
                                <span class="text-[10px] bg-rose-100 text-rose-700 px-1.5 py-0.2 rounded font-bold ml-1">Terlambat</span>
                            @endif
                        </span>
                    </div>
                </div>
            </div>

            <!-- Tim Pelaksana (Anggota) -->
            <div class="p-3.5 bg-slate-50 rounded-xl border border-slate-200/70">
                <div class="text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-2">
                    Tim Pelaksana ({{ $penugasan->pegawais->count() }} Orang)
                </div>
                <div class="flex items-center gap-2 overflow-x-auto py-0.5">
                    @foreach($penugasan->pegawais as $pgw)
                    @php
                        $relasiAnggota = $penugasan->anggota->firstWhere('pegawai_id', $pgw->id);
                        $isLead = $relasiAnggota?->peran === 'penanggung_jawab';
                    @endphp
                    <div class="group relative flex items-center">
                        <div class="w-8 h-8 rounded-full border-2 {{ $isLead ? 'border-amber-400 bg-amber-100 text-amber-800' : 'border-white bg-slate-200 text-slate-700' }} flex items-center justify-center text-xs font-bold shadow-sm" title="{{ $pgw->nama_lengkap }} ({{ $isLead ? 'Lead' : 'Anggota' }})">
                            {{ strtoupper(substr($pgw->nama_lengkap, 0, 1)) }}
                        </div>
                    </div>
                    @endforeach
                </div>
                <div class="text-[11px] text-slate-500 mt-1 truncate">
                    @php
                        $leadAnggota = $penugasan->anggota->firstWhere('peran', 'penanggung_jawab');
                        $leadPegawai = $leadAnggota ? $penugasan->pegawais->firstWhere('id', $leadAnggota->pegawai_id) : null;
                    @endphp
                    Lead: <span class="font-semibold text-slate-700">{{ $leadPegawai?->nama_lengkap ?? $penugasan->pegawais->first()?->nama_lengkap }}</span>
                </div>
            </div>

        </div>

    </div>

    <!-- WORKSPACE SECTION -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">

        <!-- Kiri: Media Pengerjaan (Google Sheets, Google Docs, atau Upload Dokumen) -->
        <div class="lg:col-span-8 space-y-6">

            @if($penugasan->tipe_media === 'spreadsheet')
            <!-- ================= GOOGLE SPREADSHEET WORKSPACE ================= -->
            <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden flex flex-col p-6 space-y-5">
                
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 border-b border-slate-100 pb-4">
                    <div class="flex items-center gap-3">
                        <div class="w-12 h-12 rounded-xl bg-emerald-100 text-emerald-700 flex items-center justify-center shrink-0">
                            <i data-lucide="sheet" class="w-6 h-6"></i>
                        </div>
                        <div>
                            <h3 class="text-base font-bold text-slate-900">Google Spreadsheet (Sheets)</h3>
                            <p class="text-xs text-slate-500">Tugas ini dikerjakan secara langsung di aplikasi resmi Google Sheets</p>
                        </div>
                    </div>

                    @if($penugasan->status !== 'selesai')
                    <button type="button" onclick="openModalTautan('spreadsheet')" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-slate-200 hover:bg-slate-50 text-slate-700 text-xs font-semibold transition-colors">
                        <i data-lucide="link" class="w-3.5 h-3.5 text-emerald-600"></i>
                        <span>{{ $penugasan->tautan_eksternal ? 'Ubah Tautan' : 'Atur Tautan' }}</span>
                    </button>
                    @endif
                </div>

                @if($penugasan->tautan_eksternal)
                <!-- Tautan Google Sheets Tersedia -->
                <div class="bg-emerald-50/60 border border-emerald-200/80 rounded-2xl p-6 space-y-4">
                    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                        <div class="space-y-1">
                            <div class="text-xs font-bold uppercase tracking-wider text-emerald-800 flex items-center gap-1.5">
                                <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
                                <span>Tautan Google Sheets Siap Digunakan</span>
                            </div>
                            <div class="text-xs text-slate-600 font-mono break-all max-w-xl">
                                {{ $penugasan->tautan_eksternal }}
                            </div>
                        </div>

                        <!-- Tombol Aksi Google Sheets -->
                        <div class="flex items-center gap-2 flex-wrap">
                            <button type="button" onclick="openInternalFullscreen('{{ $penugasan->tautan_eksternal }}', 'Google Spreadsheet: {{ addslashes($penugasan->judul) }}', 'spreadsheet')"
                                    class="inline-flex items-center justify-center gap-2 px-5 py-3 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-bold text-sm shadow-md transition-all shrink-0 cursor-pointer">
                                <i data-lucide="maximize-2" class="w-4 h-4 text-emerald-400"></i>
                                <span>Buka Layar Penuh</span>
                            </button>
                            <a href="{{ $penugasan->tautan_eksternal }}" target="_blank" rel="noopener noreferrer"
                               class="inline-flex items-center justify-center gap-2 px-5 py-3 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-sm shadow-md shadow-emerald-600/20 hover:scale-[1.02] active:scale-[0.98] transition-all shrink-0">
                                <span>Buka di Google Sheets</span>
                                <i data-lucide="external-link" class="w-4 h-4"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Pratinjau Tersemat (Embed Google Sheets jika didukung) -->
                <div class="border border-slate-200 rounded-xl overflow-hidden shadow-xs">
                    <div class="bg-slate-50 px-4 py-2 border-b border-slate-200 flex items-center justify-between text-xs text-slate-500">
                        <span class="font-medium flex items-center gap-1.5">
                            <i data-lucide="eye" class="w-3.5 h-3.5"></i> Pratinjau Lembar Kerja
                        </span>
                        <button type="button" onclick="openInternalFullscreen('{{ $penugasan->tautan_eksternal }}', 'Google Spreadsheet: {{ addslashes($penugasan->judul) }}', 'spreadsheet')"
                                class="text-emerald-700 hover:text-emerald-800 font-semibold flex items-center gap-1.5 transition-colors cursor-pointer group">
                            <span>Buka Layar Penuh</span>
                            <i data-lucide="maximize-2" class="w-3 h-3 transition-transform group-hover:scale-110"></i>
                        </button>
                    </div>
                    <iframe src="{{ $penugasan->tautan_eksternal }}" class="w-full h-[520px] bg-white border-0" allow="autoplay" loading="lazy"></iframe>
                </div>

                @else
                <!-- Tautan Belum Diisi -->
                <div class="py-10 text-center bg-slate-50 rounded-2xl border-2 border-dashed border-slate-200 p-6 space-y-3">
                    <div class="w-12 h-12 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center mx-auto">
                        <i data-lucide="link" class="w-6 h-6"></i>
                    </div>
                    <div>
                        <h4 class="text-sm font-bold text-slate-800">Tautan Google Sheets Belum Ditentukan</h4>
                        <p class="text-xs text-slate-500 max-w-md mx-auto mt-1">
                            Silakan masukkan link Google Spreadsheet yang telah dibagikan agar anggota tim dapat membukanya langsung.
                        </p>
                    </div>
                    <button type="button" onclick="openModalTautan('spreadsheet')" class="inline-flex items-center gap-2 px-5 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold rounded-xl shadow-sm transition-all">
                        <i data-lucide="plus" class="w-4 h-4"></i>
                        <span>Masukkan Tautan Google Sheets</span>
                    </button>
                </div>
                @endif

            </div>

            @elseif($penugasan->tipe_media === 'dokumen_online')
            <!-- ================= GOOGLE DOCS WORKSPACE ================= -->
            <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden flex flex-col p-6 space-y-5">
                
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 border-b border-slate-100 pb-4">
                    <div class="flex items-center gap-3">
                        <div class="w-12 h-12 rounded-xl bg-blue-100 text-blue-700 flex items-center justify-center shrink-0">
                            <i data-lucide="file-edit" class="w-6 h-6"></i>
                        </div>
                        <div>
                            <h3 class="text-base font-bold text-slate-900">Google Docs (Dokumen)</h3>
                            <p class="text-xs text-slate-500">Tugas ini dikerjakan secara langsung di aplikasi resmi Google Docs</p>
                        </div>
                    </div>

                    @if($penugasan->status !== 'selesai')
                    <button type="button" onclick="openModalTautan('dokumen_online')" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-slate-200 hover:bg-slate-50 text-slate-700 text-xs font-semibold transition-colors">
                        <i data-lucide="link" class="w-3.5 h-3.5 text-blue-600"></i>
                        <span>{{ $penugasan->tautan_eksternal ? 'Ubah Tautan' : 'Atur Tautan' }}</span>
                    </button>
                    @endif
                </div>

                @if($penugasan->tautan_eksternal)
                <!-- Tautan Google Docs Tersedia -->
                <div class="bg-blue-50/60 border border-blue-200/80 rounded-2xl p-6 space-y-4">
                    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                        <div class="space-y-1">
                            <div class="text-xs font-bold uppercase tracking-wider text-blue-800 flex items-center gap-1.5">
                                <span class="w-2 h-2 rounded-full bg-blue-500 animate-pulse"></span>
                                <span>Tautan Google Docs Siap Digunakan</span>
                            </div>
                            <div class="text-xs text-slate-600 font-mono break-all max-w-xl">
                                {{ $penugasan->tautan_eksternal }}
                            </div>
                        </div>

                        <!-- Tombol Aksi Google Docs -->
                        <div class="flex items-center gap-2 flex-wrap">
                            <button type="button" onclick="openInternalFullscreen('{{ $penugasan->tautan_eksternal }}', 'Google Docs: {{ addslashes($penugasan->judul) }}', 'dokumen_online')"
                                    class="inline-flex items-center justify-center gap-2 px-5 py-3 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-bold text-sm shadow-md transition-all shrink-0 cursor-pointer">
                                <i data-lucide="maximize-2" class="w-4 h-4 text-blue-400"></i>
                                <span>Buka Layar Penuh</span>
                            </button>
                            <a href="{{ $penugasan->tautan_eksternal }}" target="_blank" rel="noopener noreferrer"
                               class="inline-flex items-center justify-center gap-2 px-5 py-3 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-bold text-sm shadow-md shadow-blue-600/20 hover:scale-[1.02] active:scale-[0.98] transition-all shrink-0">
                                <span>Buka di Google Docs</span>
                                <i data-lucide="external-link" class="w-4 h-4"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Pratinjau Tersemat (Embed Google Docs) -->
                <div class="border border-slate-200 rounded-xl overflow-hidden shadow-xs">
                    <div class="bg-slate-50 px-4 py-2 border-b border-slate-200 flex items-center justify-between text-xs text-slate-500">
                        <span class="font-medium flex items-center gap-1.5">
                            <i data-lucide="eye" class="w-3.5 h-3.5"></i> Pratinjau Dokumen
                        </span>
                        <button type="button" onclick="openInternalFullscreen('{{ $penugasan->tautan_eksternal }}', 'Google Docs: {{ addslashes($penugasan->judul) }}', 'dokumen_online')"
                                class="text-blue-700 hover:text-blue-800 font-semibold flex items-center gap-1.5 transition-colors cursor-pointer group">
                            <span>Buka Layar Penuh</span>
                            <i data-lucide="maximize-2" class="w-3 h-3 transition-transform group-hover:scale-110"></i>
                        </button>
                    </div>
                    <iframe src="{{ $penugasan->tautan_eksternal }}" class="w-full h-[520px] bg-white border-0" allow="autoplay" loading="lazy"></iframe>
                </div>

                @else
                <!-- Tautan Belum Diisi -->
                <div class="py-10 text-center bg-slate-50 rounded-2xl border-2 border-dashed border-slate-200 p-6 space-y-3">
                    <div class="w-12 h-12 rounded-2xl bg-blue-50 text-blue-600 flex items-center justify-center mx-auto">
                        <i data-lucide="link" class="w-6 h-6"></i>
                    </div>
                    <div>
                        <h4 class="text-sm font-bold text-slate-800">Tautan Google Docs Belum Ditentukan</h4>
                        <p class="text-xs text-slate-500 max-w-md mx-auto mt-1">
                            Silakan masukkan link Google Docs yang telah dibagikan agar anggota tim dapat membukanya langsung.
                        </p>
                    </div>
                    <button type="button" onclick="openModalTautan('dokumen_online')" class="inline-flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-xs font-bold rounded-xl shadow-sm transition-all">
                        <i data-lucide="plus" class="w-4 h-4"></i>
                        <span>Masukkan Tautan Google Docs</span>
                    </button>
                </div>
                @endif

            </div>

            @else
            <!-- ================= UPLOAD DOKUMEN WORKSPACE ================= -->
            <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm p-6 space-y-6">
                
                <div class="flex items-center justify-between border-b border-slate-100 pb-4">
                    <div class="flex items-center gap-2.5">
                        <div class="w-8 h-8 rounded-lg bg-orange-100 text-primary-700 flex items-center justify-center shrink-0">
                            <i data-lucide="folder" class="w-4 h-4"></i>
                        </div>
                        <div>
                            <h3 class="text-sm font-bold text-slate-800">Berkas & Dokumen Tugas</h3>
                            <p class="text-[11px] text-slate-400">Total {{ $penugasan->dokumen->count() }} berkas terunggah</p>
                        </div>
                    </div>

                    @if($penugasan->status !== 'selesai')
                    <button type="button" onclick="document.getElementById('formUploadArea').classList.toggle('hidden')" class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-primary-50 hover:bg-primary-100 text-primary-700 text-xs font-bold rounded-lg transition-colors">
                        <i data-lucide="upload-cloud" class="w-3.5 h-3.5"></i>
                        <span>Unggah Dokumen Baru</span>
                    </button>
                    @endif
                </div>

                <!-- Form Upload Berkas -->
                @if($penugasan->status !== 'selesai')
                <div id="formUploadArea" class="{{ $penugasan->dokumen->isEmpty() ? '' : 'hidden' }} p-4 bg-slate-50 rounded-xl border border-slate-200/80 space-y-3">
                    <form action="{{ route('portal.penugasan.dokumen.upload', $penugasan->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="grid grid-cols-1 md:grid-cols-12 gap-3 items-end">
                            <div class="md:col-span-6">
                                <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">Pilih File Berkas (Maks. 25MB)</label>
                                <input type="file" name="berkas" required
                                       class="w-full text-xs text-slate-500 file:mr-3 file:py-2 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-primary-600 file:text-white hover:file:bg-primary-700 cursor-pointer bg-white border border-slate-200 rounded-xl p-1">
                            </div>

                            <div class="md:col-span-4">
                                <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">Keterangan / Catatan Versi</label>
                                <input type="text" name="keterangan" placeholder="Contoh: Draft Laporan Akhir v1.0"
                                       class="w-full px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs focus:ring-2 focus:ring-primary-500 focus:outline-none">
                            </div>

                            <div class="md:col-span-2">
                                <button type="submit" class="w-full py-2 px-3 bg-primary-600 hover:bg-primary-700 text-white rounded-xl text-xs font-bold shadow-sm transition-all flex items-center justify-center gap-1.5">
                                    <i data-lucide="upload" class="w-3.5 h-3.5"></i>
                                    <span>Unggah</span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                @endif

                <!-- Tabel Berkas Terunggah -->
                @if($penugasan->dokumen->isNotEmpty())
                <div class="overflow-x-auto">
                    <table class="w-full text-left text-xs text-slate-600">
                        <thead class="bg-slate-50 text-slate-500 font-semibold border-b border-slate-200">
                            <tr>
                                <th class="py-2.5 px-3">Nama Berkas</th>
                                <th class="py-2.5 px-3">Ukuran</th>
                                <th class="py-2.5 px-3">Pengunggah</th>
                                <th class="py-2.5 px-3">Keterangan</th>
                                <th class="py-2.5 px-3 text-right">Aksi</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @foreach($penugasan->dokumen as $dok)
                            <tr class="hover:bg-slate-50/60 transition-colors">
                                <td class="py-3 px-3 font-medium text-slate-800 flex items-center gap-2">
                                    @php
                                        $ext = strtolower($dok->tipe_file);
                                        $icon = 'file';
                                        $iconColor = 'text-slate-400';
                                        if (in_array($ext, ['pdf'])) { $icon = 'file-text'; $iconColor = 'text-red-500'; }
                                        elseif (in_array($ext, ['xls', 'xlsx', 'csv'])) { $icon = 'sheet'; $iconColor = 'text-emerald-500'; }
                                        elseif (in_array($ext, ['doc', 'docx'])) { $icon = 'file-text'; $iconColor = 'text-blue-500'; }
                                        elseif (in_array($ext, ['jpg', 'jpeg', 'png'])) { $icon = 'image'; $iconColor = 'text-purple-500'; }
                                        elseif (in_array($ext, ['zip', 'rar'])) { $icon = 'archive'; $iconColor = 'text-amber-500'; }
                                    @endphp
                                    <i data-lucide="{{ $icon }}" class="w-4 h-4 {{ $iconColor }}"></i>
                                    <span class="truncate max-w-xs" title="{{ $dok->nama_file_asli }}">{{ $dok->nama_file_asli }}</span>
                                </td>
                                <td class="py-3 px-3 font-mono text-slate-500">{{ $dok->ukuran_format }}</td>
                                <td class="py-3 px-3">
                                    <div class="font-medium text-slate-700">{{ $dok->pengunggah?->nama_lengkap ?? 'Pegawai' }}</div>
                                    <div class="text-[10px] text-slate-400">{{ $dok->created_at->format('d/m/Y H:i') }}</div>
                                </td>
                                <td class="py-3 px-3 text-slate-500">{{ $dok->keterangan ?: '-' }}</td>
                                <td class="py-3 px-3 text-right space-x-1">
                                    <a href="{{ route('portal.penugasan.dokumen.download', [$penugasan->id, $dok->id]) }}" target="_blank" class="inline-flex items-center gap-1 px-2.5 py-1 bg-primary-50 hover:bg-primary-100 text-primary-700 rounded-lg font-semibold transition-colors">
                                        <i data-lucide="download" class="w-3.5 h-3.5"></i>
                                        <span>Unduh</span>
                                    </a>

                                    @if($penugasan->status !== 'selesai' && ($isAtasanTugas || (int)$dok->diunggah_oleh === (int)$pegawai->id))
                                    <form action="{{ route('portal.penugasan.dokumen.delete', [$penugasan->id, $dok->id]) }}" method="POST" class="inline-block" onsubmit="return confirm('Hapus berkas ini?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="p-1 hover:bg-rose-50 text-slate-400 hover:text-rose-600 rounded-lg transition-colors" title="Hapus Berkas">
                                            <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
                                        </button>
                                    </form>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @else
                <div class="py-10 text-center bg-slate-50 rounded-xl border border-dashed border-slate-200">
                    <i data-lucide="folder-x" class="w-8 h-8 text-slate-300 mx-auto mb-2"></i>
                    <p class="text-xs font-bold text-slate-600">Belum ada dokumen yang diunggah</p>
                    <p class="text-[11px] text-slate-400 mt-0.5">Anggota tim dapat mengunggah berkas pekerjaan melalui tombol di atas.</p>
                </div>
                @endif

            </div>
            @endif

        </div>

        <!-- Kanan: Kolom Diskusi, Komentar, & Timeline Anggota -->
        <div class="lg:col-span-4 space-y-6">
            
            <!-- Detail Anggota & Status Kontribusi -->
            <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm p-5 space-y-3">
                <h3 class="text-xs font-bold text-slate-800 uppercase tracking-wider flex items-center gap-1.5 border-b border-slate-100 pb-2.5">
                    <i data-lucide="users" class="w-3.5 h-3.5 text-primary-600"></i>
                    <span>Status Pelaksana Tim</span>
                </h3>

                <div class="space-y-2.5">
                    @foreach($penugasan->anggota as $itemAnggota)
                    @php
                        $pgw = $itemAnggota->pegawai;
                        $badgeBg = match($itemAnggota->status_kontribusi) {
                            'selesai' => 'bg-emerald-50 text-emerald-700 border-emerald-200',
                            'sedang_mengerjakan' => 'bg-blue-50 text-blue-700 border-blue-200',
                            default => 'bg-slate-50 text-slate-600 border-slate-200'
                        };
                        $labelKontribusi = match($itemAnggota->status_kontribusi) {
                            'selesai' => 'Selesai',
                            'sedang_mengerjakan' => 'Sedang Mengerjakan',
                            default => 'Belum Mulai'
                        };
                    @endphp
                    <div class="p-2.5 rounded-xl bg-slate-50 border border-slate-200/60 flex items-center justify-between gap-2">
                        <div class="flex items-center gap-2 min-w-0">
                            <div class="w-7 h-7 rounded-full bg-slate-200 text-slate-700 font-bold text-[10px] flex items-center justify-center shrink-0">
                                {{ strtoupper(substr($pgw?->nama_lengkap ?? 'P', 0, 1)) }}
                            </div>
                            <div class="min-w-0">
                                <div class="text-xs font-bold text-slate-800 truncate">{{ $pgw?->nama_lengkap }}</div>
                                <div class="text-[10px] text-slate-400 truncate">
                                    {{ $itemAnggota->peran === 'penanggung_jawab' ? '⭐ Penanggung Jawab' : 'Kolaborator' }}
                                </div>
                            </div>
                        </div>

                        <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold border {{ $badgeBg }} shrink-0">
                            {{ $labelKontribusi }}
                        </span>
                    </div>
                    @endforeach
                </div>
            </div>

            <!-- Diskusi & Komentar Tugas -->
            <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm p-5 space-y-4">
                <div class="flex items-center justify-between border-b border-slate-100 pb-2.5">
                    <h3 class="text-xs font-bold text-slate-800 uppercase tracking-wider flex items-center gap-1.5">
                        <i data-lucide="message-square" class="w-3.5 h-3.5 text-primary-600"></i>
                        <span>Diskusi & Catatan</span>
                    </h3>
                    <span class="text-[11px] font-semibold px-2 py-0.5 rounded-full bg-slate-100 text-slate-600">
                        {{ $penugasan->komentar->count() }}
                    </span>
                </div>

                <!-- Chat Messages Feed -->
                <div class="space-y-3 max-h-96 overflow-y-auto pr-1">
                    @forelse($penugasan->komentar as $kom)
                    @php
                        $isMe = (int) $kom->pegawai_id === (int) $pegawai->id;
                        $isSystemLog = Str::startsWith($kom->pesan, ['📌', '✅', '⚠️', '🔗']);
                    @endphp

                    @if($isSystemLog)
                        <!-- System Notification Message -->
                        <div class="p-2.5 bg-slate-50 rounded-xl border border-slate-200/60 text-xs text-slate-600 space-y-1">
                            <div class="text-[11px] font-medium leading-relaxed whitespace-pre-line text-slate-700">
                                {{ $kom->pesan }}
                            </div>
                            <div class="text-[10px] text-slate-400 font-mono">
                                {{ $kom->created_at->format('d M H:i') }}
                            </div>
                        </div>
                    @else
                        <!-- Regular Chat Bubble -->
                        <div class="flex flex-col {{ $isMe ? 'items-end' : 'items-start' }}">
                            <div class="flex items-center gap-1.5 mb-1 text-[10px] text-slate-400">
                                <span class="font-bold text-slate-700">{{ $kom->pegawai?->nama_lengkap ?? 'Pegawai' }}</span>
                                <span>•</span>
                                <span>{{ $kom->created_at->diffForHumans() }}</span>
                            </div>
                            <div class="max-w-[88%] p-3 rounded-2xl text-xs leading-relaxed {{ $isMe ? 'bg-primary-600 text-white rounded-br-none shadow-sm' : 'bg-slate-100 text-slate-800 rounded-bl-none' }}">
                                <div class="whitespace-pre-line">{{ $kom->pesan }}</div>
                                @if($kom->lampiran)
                                    <div class="mt-2 pt-2 border-t {{ $isMe ? 'border-primary-500' : 'border-slate-200' }}">
                                        <a href="{{ Storage::url($kom->lampiran) }}" target="_blank" class="inline-flex items-center gap-1 text-[11px] underline font-medium">
                                            <i data-lucide="paperclip" class="w-3.5 h-3.5"></i> Lampiran Berkas
                                        </a>
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endif

                    @empty
                    <div class="py-6 text-center text-slate-400">
                        <i data-lucide="messages-square" class="w-6 h-6 mx-auto mb-1 opacity-40"></i>
                        <p class="text-xs">Belum ada percakapan pada tugas ini.</p>
                    </div>
                    @endforelse
                </div>

                <!-- Form Input Kirim Komentar -->
                <form action="{{ route('portal.penugasan.komentar', $penugasan->id) }}" method="POST" enctype="multipart/form-data" class="pt-2 border-t border-slate-100 space-y-2">
                    @csrf
                    <div>
                        <textarea name="pesan" rows="2" required placeholder="Tulis catatan, pertanyaan, atau instruksi..."
                                  class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 resize-none"></textarea>
                    </div>

                    <div class="flex items-center justify-between gap-2">
                        <label class="inline-flex items-center gap-1 px-2.5 py-1.5 rounded-lg border border-slate-200 text-slate-500 hover:text-slate-700 bg-slate-50 hover:bg-slate-100 cursor-pointer text-xs transition-colors">
                            <i data-lucide="paperclip" class="w-3.5 h-3.5"></i>
                            <span class="text-[11px]">Lampirkan</span>
                            <input type="file" name="lampiran" class="hidden">
                        </label>

                        <button type="submit" class="inline-flex items-center gap-1.5 px-4 py-1.5 bg-primary-600 hover:bg-primary-700 text-white rounded-xl text-xs font-bold shadow-sm transition-all">
                            <span>Kirim</span>
                            <i data-lucide="send" class="w-3.5 h-3.5"></i>
                        </button>
                    </div>
                </form>

            </div>

        </div>

    </div>

</div>

<!-- Modal Update Tautan Google Sheets / Docs -->
<div id="modalTautan" class="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-sm hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl border border-slate-200 shadow-2xl max-w-lg w-full p-6 space-y-4">
        <div class="flex items-center justify-between border-b border-slate-100 pb-3">
            <h3 class="text-base font-bold text-slate-900 flex items-center gap-2" id="modalTautanTitle">
                <i data-lucide="link" class="w-4 h-4 text-primary-600"></i>
                <span>Atur Tautan Dokumen</span>
            </h3>
            <button type="button" onclick="closeModalTautan()" class="text-slate-400 hover:text-slate-600">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>

        <form action="{{ route('portal.penugasan.tautan.update', $penugasan->id) }}" method="POST" class="space-y-4">
            @csrf
            <div>
                <label for="input_modal_tautan" class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5" id="labelModalTautan">
                    URL / Tautan Dokumen
                </label>
                <input type="url" name="tautan_eksternal" id="input_modal_tautan" required
                       value="{{ $penugasan->tautan_eksternal }}"
                       placeholder="https://docs.google.com/..."
                       class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary-500">
                <p class="text-[11px] text-slate-400 mt-1">
                    Pastikan pengaturan hak akses di Google telah diubah menjadi "Siapa saja yang memiliki link dapat melihat/mengedit" atau dibagikan ke email rekan tim.
                </p>
            </div>

            <div class="flex items-center justify-end gap-2 pt-2">
                <button type="button" onclick="closeModalTautan()" class="px-4 py-2 border border-slate-200 rounded-xl text-xs font-semibold text-slate-600 hover:bg-slate-100">
                    Batal
                </button>
                <button type="submit" class="px-5 py-2 rounded-xl text-xs font-bold text-white bg-primary-600 hover:bg-primary-700 shadow-sm transition-all">
                    Simpan Tautan
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Modal Evaluasi & Review Atasan -->
@if($isAtasanTugas)
<div id="modalReview" class="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-sm hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl border border-slate-200 shadow-2xl max-w-md w-full p-6 space-y-4">
        <div class="flex items-center justify-between border-b border-slate-100 pb-3">
            <h3 class="text-base font-bold text-slate-900 flex items-center gap-2" id="modalReviewTitle">
                <span>Evaluasi Tugas</span>
            </h3>
            <button type="button" onclick="closeReviewModal()" class="text-slate-400 hover:text-slate-600">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>

        <form action="{{ route('portal.penugasan.review', $penugasan->id) }}" method="POST" id="formReviewAtasan" class="space-y-4">
            @csrf
            <input type="hidden" name="aksi" id="reviewAksiInput" value="setujui">

            <div>
                <label for="catatan_atasan" class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5" id="labelCatatanReview">
                    Catatan Evaluasi / Instruksi
                </label>
                <textarea name="catatan_atasan" id="catatan_atasan" rows="4" placeholder="Tulis catatan apresiasi atau bagian yang harus direvisi oleh tim..."
                          class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary-500"></textarea>
            </div>

            <div class="flex items-center justify-end gap-2 pt-2">
                <button type="button" onclick="closeReviewModal()" class="px-4 py-2 border border-slate-200 rounded-xl text-xs font-semibold text-slate-600 hover:bg-slate-100">
                    Batal
                </button>
                <button type="submit" id="btnSubmitReview" class="px-5 py-2 rounded-xl text-xs font-bold text-white shadow-sm transition-all">
                    Kirim Keputusan
                </button>
            </div>
        </form>
    </div>
</div>
@endif

<!-- Fullscreen In-App Workspace Modal (Layar Penuh Tetap di Dalam Aplikasi) -->
<div id="modalFullscreenWorkspace" class="fixed inset-0 z-[9999] bg-slate-950 flex flex-col hidden select-none">
    <!-- Top Navigation & Control Bar -->
    <div class="h-14 bg-slate-900 border-b border-slate-800 px-4 sm:px-6 flex items-center justify-between shrink-0 shadow-lg">
        <!-- Dokumen Info -->
        <div class="flex items-center gap-3 overflow-hidden pr-4">
            <div id="fullscreenTypeBadge" class="w-8 h-8 rounded-lg flex items-center justify-center shrink-0 bg-emerald-500/20 text-emerald-400">
                <i id="fullscreenTypeIcon" data-lucide="sheet" class="w-4 h-4"></i>
            </div>
            <div class="truncate">
                <h4 id="fullscreenDocTitle" class="text-sm font-bold text-white truncate">Pratinjau Layar Penuh</h4>
                <p class="text-[11px] text-slate-400 truncate flex items-center gap-2">
                    <span class="font-semibold text-slate-300">Portal Smart Presensi</span>
                    <span>&bull;</span>
                    <span class="text-emerald-400 flex items-center gap-1">
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                        Layar Penuh di Aplikasi
                    </span>
                </p>
            </div>
        </div>

        <!-- Action Controls -->
        <div class="flex items-center gap-2 shrink-0">
            <!-- Tombol Refresh Iframe -->
            <button type="button" onclick="refreshFullscreenIframe()" 
                    title="Muat Ulang Halaman"
                    class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-semibold border border-slate-700 transition-colors cursor-pointer">
                <i data-lucide="rotate-cw" class="w-3.5 h-3.5"></i>
                <span class="hidden sm:inline">Muat Ulang</span>
            </button>

            <!-- Tombol Tutup / Keluar Layar Penuh -->
            <button type="button" onclick="closeInternalFullscreen()" 
                    title="Tutup Layar Penuh (Esc)"
                    class="inline-flex items-center gap-2 px-4 py-1.5 rounded-lg bg-rose-600 hover:bg-rose-700 text-white text-xs font-bold shadow-md shadow-rose-600/30 transition-all hover:scale-[1.02] active:scale-[0.98] cursor-pointer">
                <i data-lucide="x" class="w-4 h-4"></i>
                <span>Tutup Layar Penuh</span>
                <kbd class="hidden md:inline-block px-1.5 py-0.5 text-[10px] font-mono bg-rose-700/80 rounded border border-rose-500/40">ESC</kbd>
            </button>
        </div>
    </div>

    <!-- Iframe Container Layar Penuh -->
    <div class="flex-1 w-full h-[calc(100vh-3.5rem)] relative bg-slate-900">
        <!-- Loading Spinner -->
        <div id="fullscreenIframeLoader" class="absolute inset-0 flex items-center justify-center bg-slate-900/90 text-white z-10 transition-opacity duration-200">
            <div class="flex flex-col items-center gap-3">
                <div class="w-8 h-8 border-3 border-primary-500 border-t-transparent rounded-full animate-spin"></div>
                <p class="text-xs text-slate-300 font-medium">Menyiapkan tampilan layar penuh...</p>
            </div>
        </div>

        <!-- Fullscreen Iframe -->
        <iframe id="fullscreenIframe"
                src=""
                class="w-full h-full border-0 bg-white"
                allow="autoplay; clipboard-write; encrypted-media"
                onload="document.getElementById('fullscreenIframeLoader').classList.add('hidden')">
        </iframe>
    </div>
</div>

@push('scripts')
<script>
    // Layar Penuh Internal (Tetap di Dalam Aplikasi)
    let currentFullscreenUrl = '';

    function openInternalFullscreen(url, title, type) {
        const modal = document.getElementById('modalFullscreenWorkspace');
        const titleEl = document.getElementById('fullscreenDocTitle');
        const badgeEl = document.getElementById('fullscreenTypeBadge');
        const iconEl = document.getElementById('fullscreenTypeIcon');
        const iframe = document.getElementById('fullscreenIframe');
        const loader = document.getElementById('fullscreenIframeLoader');

        if (!modal || !iframe) return;

        currentFullscreenUrl = url;
        if (titleEl) titleEl.textContent = title;

        if (type === 'spreadsheet') {
            if (badgeEl) badgeEl.className = 'w-8 h-8 rounded-lg flex items-center justify-center shrink-0 bg-emerald-500/20 text-emerald-400';
            if (iconEl) iconEl.setAttribute('data-lucide', 'sheet');
        } else {
            if (badgeEl) badgeEl.className = 'w-8 h-8 rounded-lg flex items-center justify-center shrink-0 bg-blue-500/20 text-blue-400';
            if (iconEl) iconEl.setAttribute('data-lucide', 'file-text');
        }

        if (window.lucide) lucide.createIcons();

        if (loader) loader.classList.remove('hidden');
        iframe.src = url;

        modal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closeInternalFullscreen() {
        const modal = document.getElementById('modalFullscreenWorkspace');
        const iframe = document.getElementById('fullscreenIframe');
        if (modal) {
            modal.classList.add('hidden');
        }
        if (iframe) {
            iframe.src = '';
        }
        document.body.style.overflow = '';
    }

    function refreshFullscreenIframe() {
        const iframe = document.getElementById('fullscreenIframe');
        const loader = document.getElementById('fullscreenIframeLoader');
        if (iframe && currentFullscreenUrl) {
            if (loader) loader.classList.remove('hidden');
            iframe.src = currentFullscreenUrl;
        }
    }

    // Listener tombol keyboard Escape untuk menutup layar penuh
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            const modal = document.getElementById('modalFullscreenWorkspace');
            if (modal && !modal.classList.contains('hidden')) {
                closeInternalFullscreen();
            }
        }
    });

    // Modal Tautan Google
    function openModalTautan(type) {
        const modal = document.getElementById('modalTautan');
        const title = document.getElementById('modalTautanTitle');
        const label = document.getElementById('labelModalTautan');
        const input = document.getElementById('input_modal_tautan');

        if (!modal) return;

        if (type === 'spreadsheet') {
            title.innerHTML = '<i data-lucide="sheet" class="w-4 h-4 text-emerald-600"></i> <span>Atur Tautan Google Spreadsheet</span>';
            label.innerText = 'Tautan / Link Google Sheets';
            input.placeholder = 'https://docs.google.com/spreadsheets/d/...';
        } else {
            title.innerHTML = '<i data-lucide="file-edit" class="w-4 h-4 text-blue-600"></i> <span>Atur Tautan Google Docs</span>';
            label.innerText = 'Tautan / Link Google Docs';
            input.placeholder = 'https://docs.google.com/document/d/...';
        }
        if (window.lucide) lucide.createIcons();

        modal.classList.remove('hidden');
    }

    function closeModalTautan() {
        const modal = document.getElementById('modalTautan');
        if (modal) modal.classList.add('hidden');
    }

    // Modal Review Atasan
    function openReviewModal(action) {
        const modal = document.getElementById('modalReview');
        const aksiInput = document.getElementById('reviewAksiInput');
        const title = document.getElementById('modalReviewTitle');
        const label = document.getElementById('labelCatatanReview');
        const btnSubmit = document.getElementById('btnSubmitReview');
        const textarea = document.getElementById('catatan_atasan');

        if (!modal) return;

        aksiInput.value = action;
        if (action === 'setujui') {
            title.innerHTML = '<span>✅ Setujui & Selesaikan Tugas</span>';
            label.innerText = 'Catatan Apresiasi / Evaluasi Akhir (Opsional)';
            btnSubmit.className = 'px-5 py-2 rounded-xl text-xs font-bold text-white bg-emerald-600 hover:bg-emerald-700 shadow-sm transition-all';
            btnSubmit.innerText = 'Setujui Sekarang';
            textarea.required = false;
        } else {
            title.innerHTML = '<span>⚠️ Minta Perbaikan (Revisi)</span>';
            label.innerText = 'Instruksi Bagian yang Perlu Direvisi (Wajib)';
            btnSubmit.className = 'px-5 py-2 rounded-xl text-xs font-bold text-white bg-rose-600 hover:bg-rose-700 shadow-sm transition-all';
            btnSubmit.innerText = 'Kirim Instruksi Revisi';
            textarea.required = true;
        }

        modal.classList.remove('hidden');
    }

    function closeReviewModal() {
        const modal = document.getElementById('modalReview');
        if (modal) modal.classList.add('hidden');
    }
</script>
@endpush
@endsection