@extends('layouts.admin')

@section('title', 'Detail Pengumuman - ' . $pengumuman->judul)

@section('content')
<div class="space-y-6 max-w-5xl mx-auto">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div class="flex items-center gap-3">
            <a href="{{ route('admin.pengumuman.index') }}" class="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-xl transition-colors">
                <i data-lucide="arrow-left" class="w-5 h-5"></i>
            </a>
            <div>
                <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Detail Pengumuman</h1>
                <p class="text-xs text-slate-500 mt-0.5">Informasi konten publikasi dan metrik pembaca karyawan</p>
            </div>
        </div>
        <div class="flex items-center gap-2">
            <a href="{{ route('admin.pengumuman.edit', $pengumuman->id) }}" class="inline-flex items-center gap-2 px-3.5 py-2 rounded-xl bg-amber-500 hover:bg-amber-600 text-white text-xs font-semibold shadow-sm transition-colors">
                <i data-lucide="edit-3" class="w-4 h-4"></i>
                <span>Edit Pengumuman</span>
            </a>
            <form action="{{ route('admin.pengumuman.destroy', $pengumuman->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus pengumuman ini?')" class="inline-block">
                @csrf
                @method('DELETE')
                <button type="submit" class="p-2 rounded-xl text-rose-600 hover:bg-rose-50 border border-rose-200 transition-colors" title="Hapus">
                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                </button>
            </form>
        </div>
    </div>

    <!-- Alert Flash -->
    @if(session('success'))
    <div class="p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-800 text-xs font-semibold flex items-center justify-between shadow-sm">
        <div class="flex items-center gap-2.5">
            <i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-600 shrink-0"></i>
            <span>{{ session('success') }}</span>
        </div>
    </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Kolom Kiri: Konten Pengumuman (Preview) -->
        <div class="lg:col-span-2 space-y-6">
            <div class="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
                @if($pengumuman->gambar)
                <div class="w-full h-56 relative bg-slate-900">
                    <img src="{{ $pengumuman->gambar_url }}" alt="Banner Pengumuman" class="w-full h-full object-cover">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
                    <div class="absolute bottom-4 left-4 right-4 flex items-center gap-2">
                        @if($pengumuman->is_pinned)
                        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-[10px] font-bold bg-amber-500 text-white shadow">
                            <i data-lucide="pin" class="w-3 h-3"></i> PINNED
                        </span>
                        @endif
                        <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-[10px] font-bold bg-white/90 text-slate-800 backdrop-blur shadow">
                            {{ $pengumuman->label_tipe }}
                        </span>
                    </div>
                </div>
                @endif

                <div class="p-6 space-y-4">
                    @if(!$pengumuman->gambar)
                    <div class="flex items-center gap-2">
                        @if($pengumuman->is_pinned)
                        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-bold bg-amber-100 text-amber-800">
                            <i data-lucide="pin" class="w-3 h-3 fill-amber-500"></i> PINNED
                        </span>
                        @endif
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold border 
                            {{ match($pengumuman->tipe) {
                                'penting' => 'bg-rose-50 text-rose-700 border-rose-200',
                                'mendesak' => 'bg-amber-50 text-amber-700 border-amber-200',
                                'acara' => 'bg-emerald-50 text-emerald-700 border-emerald-200',
                                default => 'bg-sky-50 text-sky-700 border-sky-200',
                            } }}">
                            {{ $pengumuman->label_tipe }}
                        </span>
                    </div>
                    @endif

                    <div>
                        <h2 class="text-xl font-bold text-slate-900 leading-snug">{{ $pengumuman->judul }}</h2>
                        <div class="flex items-center gap-3 mt-2 text-xs text-slate-400">
                            <span class="flex items-center gap-1">
                                <i data-lucide="user" class="w-3.5 h-3.5"></i>
                                {{ $pengumuman->pembuat->name ?? 'Administrator' }}
                            </span>
                            <span>•</span>
                            <span class="flex items-center gap-1">
                                <i data-lucide="calendar" class="w-3.5 h-3.5"></i>
                                {{ $pengumuman->created_at->translatedFormat('d F Y, H:i') }}
                            </span>
                        </div>
                    </div>

                    @if($pengumuman->ringkasan)
                    <div class="p-3.5 rounded-xl bg-slate-50 border border-slate-100 text-xs text-slate-600 font-medium italic">
                        "{{ $pengumuman->ringkasan }}"
                    </div>
                    @endif

                    <div class="prose max-w-none text-xs text-slate-700 leading-relaxed whitespace-pre-line border-t border-slate-100 pt-4">
                        {{ $pengumuman->konten }}
                    </div>

                    @if($pengumuman->lampiran_dokumen)
                    <div class="pt-4 border-t border-slate-100">
                        <p class="text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-2">Dokumen Lampiran</p>
                        <a href="{{ $pengumuman->lampiran_url }}" target="_blank" class="inline-flex items-center gap-2.5 px-3.5 py-2.5 rounded-xl bg-primary-50 hover:bg-primary-100 border border-primary-200 text-primary-700 text-xs font-semibold transition-colors">
                            <i data-lucide="file-text" class="w-4 h-4 text-primary-600"></i>
                            <span class="truncate">{{ basename($pengumuman->lampiran_dokumen) }}</span>
                            <i data-lucide="external-link" class="w-3.5 h-3.5 text-primary-400 ml-1"></i>
                        </a>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Kolom Kanan: Status & Statistik Pembaca -->
        <div class="space-y-6">
            <!-- Ringkasan Distribusi & Target -->
            <div class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm space-y-4">
                <h3 class="text-xs font-bold text-slate-800 uppercase tracking-wider flex items-center gap-2">
                    <i data-lucide="target" class="w-4 h-4 text-primary-600"></i>
                    <span>Distribusi Penerima</span>
                </h3>

                <div class="space-y-2.5 text-xs">
                    <div class="flex items-center justify-between py-1.5 border-b border-slate-50">
                        <span class="text-slate-500">Target Penerima:</span>
                        @if($pengumuman->target_audience === 'semua')
                        <span class="font-bold text-blue-600 bg-blue-50 px-2 py-0.5 rounded-md">Semua Karyawan</span>
                        @else
                        <span class="font-bold text-purple-600 bg-purple-50 px-2 py-0.5 rounded-md">{{ $pengumuman->pegawais->count() }} Karyawan Tertentu</span>
                        @endif
                    </div>
                    <div class="flex items-center justify-between py-1.5 border-b border-slate-50">
                        <span class="text-slate-500">Mulai Tayang:</span>
                        <span class="font-bold text-slate-800">{{ \Carbon\Carbon::parse($pengumuman->tanggal_mulai)->translatedFormat('d M Y') }}</span>
                    </div>
                    <div class="flex items-center justify-between py-1.5 border-b border-slate-50">
                        <span class="text-slate-500">Berakhir:</span>
                        <span class="font-bold text-slate-800">
                            {{ $pengumuman->tanggal_selesai ? \Carbon\Carbon::parse($pengumuman->tanggal_selesai)->translatedFormat('d M Y') : 'Tanpa Batas Waktu' }}
                        </span>
                    </div>
                    <div class="flex items-center justify-between py-1.5">
                        <span class="text-slate-500">Status Saat Ini:</span>
                        @if($pengumuman->is_aktif)
                            <span class="inline-flex items-center gap-1 font-bold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-md text-[10px]">
                                <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
                                Sedang Aktif
                            </span>
                        @else
                            <span class="font-bold text-slate-500 bg-slate-100 px-2 py-0.5 rounded-md text-[10px]">Nonaktif</span>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Metrik Pembaca -->
            <div class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm space-y-4">
                <h3 class="text-xs font-bold text-slate-800 uppercase tracking-wider flex items-center gap-2">
                    <i data-lucide="pie-chart" class="w-4 h-4 text-primary-600"></i>
                    <span>Tingkat Keterbacaan</span>
                </h3>

                @php
                    $percentage = $targetKaryawanCount > 0 ? round(($dibacaCount / $targetKaryawanCount) * 100) : 0;
                @endphp

                <div>
                    <div class="flex items-center justify-between text-xs mb-1.5">
                        <span class="font-bold text-slate-700">{{ $dibacaCount }} dari {{ $targetKaryawanCount }} Karyawan</span>
                        <span class="font-black text-primary-600">{{ $percentage }}%</span>
                    </div>
                    <div class="w-full h-2.5 rounded-full bg-slate-100 overflow-hidden">
                        <div class="h-full bg-gradient-to-r from-primary-500 to-indigo-600 rounded-full transition-all duration-500" style="width: {{ $percentage }}%"></div>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-2 pt-2">
                    <div class="p-3 rounded-xl bg-emerald-50 border border-emerald-100 text-center">
                        <p class="text-[10px] font-bold text-emerald-600 uppercase tracking-wider">Sudah Membaca</p>
                        <h4 class="text-lg font-black text-emerald-700 mt-0.5">{{ $dibacaCount }}</h4>
                    </div>
                    <div class="p-3 rounded-xl bg-slate-50 border border-slate-100 text-center">
                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Belum Membaca</p>
                        <h4 class="text-lg font-black text-slate-700 mt-0.5">{{ $belumDibacaCount }}</h4>
                    </div>
                </div>
            </div>

            <!-- List Pembaca Terakhir -->
            <div class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm space-y-3">
                <h3 class="text-xs font-bold text-slate-800 uppercase tracking-wider flex items-center gap-2">
                    <i data-lucide="check-check" class="w-4 h-4 text-emerald-600"></i>
                    <span>Daftar Pembaca (Terbaru)</span>
                </h3>

                <div class="divide-y divide-slate-100 max-h-72 overflow-y-auto">
                    @forelse($pembacaLogs as $log)
                    <div class="py-2.5 flex items-center justify-between text-xs">
                        <div class="min-w-0 pr-2">
                            <p class="font-bold text-slate-800 truncate">{{ $log->pegawai->nama_lengkap ?? 'Karyawan' }}</p>
                            <p class="text-[10px] text-slate-400 truncate">{{ $log->pegawai->departemen->nama_departemen ?? '-' }}</p>
                        </div>
                        <span class="text-[10px] text-slate-400 shrink-0 font-medium">
                            {{ $log->dibaca_pada ? \Carbon\Carbon::parse($log->dibaca_pada)->diffForHumans() : '-' }}
                        </span>
                    </div>
                    @empty
                    <div class="py-6 text-center text-xs text-slate-400">
                        Belum ada karyawan yang membuka pengumuman ini.
                    </div>
                    @endforelse
                </div>

                @if($pembacaLogs->hasPages())
                <div class="pt-2 border-t border-slate-100">
                    {{ $pembacaLogs->links() }}
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection