@extends('user.layouts.app')

@section('content')

@php
// Logika status agar sinkron dengan database
$status = $activity->status ?? 'on_progres';

$statusLabel = match($status) {
    'selesai'    => 'DISETUJUI',
    'on_progres' => 'ON PROGRES',
    'review'     => 'REVIEW',
    default      => strtoupper($status),
};

$statusColor = match($status) {
    'selesai'    => 'bg-green-100 text-green-700',
    'on_progres' => 'bg-blue-100 text-blue-700',
    'review'     => 'bg-yellow-100 text-yellow-700',
    default      => 'bg-gray-100 text-gray-700',
};

$fileName = $activity->lampiran ? basename($activity->lampiran) : null;
$shortName = $fileName && strlen($fileName) > 30
    ? substr($fileName, 0, 30) . '...'
    : $fileName;
@endphp

<div class="max-w-6xl mx-auto mt-10 px-4 pb-16">

    {{-- HEADER --}}
    <div class="mb-8">
        <div class="flex gap-3 items-center mb-3">
            <span class="{{ $statusColor }} text-xs px-4 py-1.5 rounded-full font-semibold">
                {{ $statusLabel }}
            </span>
            <span class="text-sm text-slate-400">
                Terakhir diperbarui: 
                {{ $activity->updated_at ? \Carbon\Carbon::parse($activity->updated_at)->translatedFormat('d M Y') : '-' }}
            </span>
        </div>
        <h1 class="text-3xl font-bold text-[#0D215C]">{{ $activity->nama_kegiatan }}</h1>
        <p class="text-sm text-slate-400">Informasi lengkap aktivitas pegawai</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

        {{-- KIRI: KONTEN UTAMA --}}
        <div class="lg:col-span-2 bg-white p-7 rounded-2xl shadow-sm border border-slate-100">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 mb-8">
                <div>
                    <p class="text-xs text-slate-400 uppercase tracking-wide mb-1">Nama Pegawai</p>
                    <p class="font-semibold text-lg text-slate-800">{{ $activity->user->name ?? 'User Tidak Ditemukan' }}</p>
                    <p class="text-sm text-slate-400">Username: {{ $activity->user->username ?? '-' }}</p>
                </div>

                <div>
                    <p class="text-xs text-slate-400 uppercase tracking-wide mb-1">Lokasi</p>
                    <p class="font-semibold text-slate-800 flex items-center gap-2">
                        <i data-lucide="map-pin" class="w-4 h-4 text-slate-400"></i>
                        {{ $activity->lokasi ?? '-' }}
                    </p>
                </div>

                <div>
                    <p class="text-xs text-slate-400 uppercase tracking-wide mb-1">Tanggal Mulai</p>
                    <p class="font-semibold text-slate-800 flex items-center gap-2">
                        <i data-lucide="calendar" class="w-4 h-4 text-slate-400"></i>
                        {{ $activity->tanggal ? \Carbon\Carbon::parse($activity->tanggal)->translatedFormat('d F Y') : '-' }}
                    </p>
                </div>

                <div>
                    <p class="text-xs text-slate-400 uppercase tracking-wide mb-1">Tenggat Waktu</p>
                    <p class="font-semibold text-slate-800 flex items-center gap-2">
                        <i data-lucide="clock" class="w-4 h-4 text-slate-400"></i>
                        @if($activity->tanggal_selesai)
                            @php
                                $isOverdue = \Carbon\Carbon::parse($activity->tanggal_selesai)->isPast() && $activity->status !== 'selesai' && $activity->status !== 'telah_ditinjau';
                            @endphp
                            <span class="{{ $isOverdue ? 'text-red-600 font-bold' : '' }}">
                                {{ \Carbon\Carbon::parse($activity->tanggal_selesai)->translatedFormat('d F Y') }}
                                @if($isOverdue) (Terlambat) @endif
                            </span>
                        @else
                            -
                        @endif
                    </p>
                </div>
            </div>

            <hr class="mb-6 border-slate-100">

            <div class="mb-8">
                <p class="text-xs text-slate-400 uppercase tracking-wide mb-2">Deskripsi Detail</p>
                <div class="text-sm text-slate-600 leading-relaxed text-justify">
                    {{ $activity->deskripsi ?? 'Tidak ada deskripsi tambahan.' }}
                </div>
            </div>

            @if(!empty($activity->status_note))
            <div class="mb-8 p-4 bg-blue-50 border border-blue-100 rounded-xl">
                <p class="text-xs text-blue-500 uppercase tracking-wide mb-2 font-semibold">Catatan Status Terakhir</p>
                <div class="text-sm text-blue-900 leading-relaxed text-justify">
                    {{ $activity->status_note }}
                </div>
            </div>
            @endif

            {{-- 📝 TIMELINE PROGRESS MONITORING --}}
            <div class="mb-8">
                <p class="text-xs text-slate-400 uppercase tracking-wide mb-4">Log Monitoring Progress</p>
                
                @if(isset($activity->progress) && count($activity->progress) > 0)
                <div class="relative border-l-2 border-indigo-100 ml-3 pl-5 space-y-6">
                    @foreach($activity->progress as $prog)
                    <div class="relative">
                        <div class="absolute -left-[27px] bg-indigo-500 h-3 w-3 rounded-full border-2 border-white top-1"></div>
                        <div class="text-xs text-slate-400 mb-1">
                            {{ \Carbon\Carbon::parse($prog['created_at'])->format('d M Y, H:i') }} • 
                            <span class="font-semibold text-indigo-500">{{ $prog['user']['name'] ?? 'Pegawai' }}</span>
                        </div>
                        <div class="text-sm text-slate-700 bg-slate-50 border border-slate-100 p-3 rounded-lg shadow-sm">
                            {{ $prog['note'] }}
                            @if(!empty($prog['attachment']))
                            <div class="mt-3 pt-3 border-t border-slate-200">
                                <a href="http://127.0.0.1:8000/{{ $prog['attachment'] }}" target="_blank" 
                                   class="inline-flex items-center gap-2 px-3 py-1.5 bg-indigo-50 text-indigo-600 text-xs font-semibold rounded-lg hover:bg-indigo-100 transition-colors border border-indigo-100">
                                    <i data-lucide="paperclip" class="w-3.5 h-3.5"></i> Lihat Lampiran Bukti
                                </a>
                            </div>
                            @endif
                        </div>
                    </div>
                    @endforeach
                </div>
                @else
                <div class="text-sm text-slate-500 bg-slate-50 p-4 rounded-xl border border-dashed border-slate-200 text-center">
                    Belum ada log progress yang dicatat untuk kegiatan ini.
                </div>
                @endif
                
                @php
                    $isPetugas = false;
                    if(isset($activity->petugas)) {
                        foreach($activity->petugas as $p) {
                            if($p['id'] == session('user_id')) {
                                $isPetugas = true;
                                break;
                            }
                        }
                    }
                @endphp
                
                @if($status !== 'selesai' && $isPetugas)
                <div class="mt-6 border-t border-slate-100 pt-5">
                    <form action="{{ route('activity.progress', $activity->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <label class="block text-sm font-semibold text-slate-700 mb-2">Tambahkan Log Progress</label>
                        <div class="flex flex-col gap-3">
                            <textarea name="note" required rows="3" placeholder="Contoh: Tim sudah sampai di lokasi survei..." class="w-full bg-slate-50 border border-slate-200 text-slate-800 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all shadow-sm resize-y"></textarea>
                            
                            <div class="flex justify-end gap-3 flex-wrap">
                                <label class="cursor-pointer bg-slate-50 border border-slate-200 text-slate-500 hover:text-indigo-600 hover:border-indigo-300 px-5 py-2.5 rounded-xl text-sm font-medium transition-all shadow-sm flex items-center gap-2 whitespace-nowrap">
                                    <i data-lucide="image" class="w-4 h-4"></i> Bukti Foto
                                    <input type="file" name="attachment" accept="image/*,.pdf" class="hidden" onchange="this.parentElement.querySelector('span').innerText = this.files[0].name.substring(0,15) + '...'">
                                    <span class="text-xs text-slate-400"></span>
                                </label>

                                <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2.5 rounded-xl text-sm font-medium shadow-sm shadow-indigo-200 transition-all flex items-center justify-center gap-2 whitespace-nowrap">
                                    <i data-lucide="send" class="w-4 h-4"></i> Kirim Log
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                @endif
            </div>

            {{-- ACTION BUTTONS --}}
            <div class="flex gap-3 flex-wrap border-t pt-6">
                @if($status !== 'selesai' && $isPetugas)
                <a href="{{ route('activity.edit', $activity->id) }}"
                   class="inline-flex items-center gap-2 bg-yellow-500 hover:bg-yellow-600 text-white px-5 py-2.5 rounded-lg text-sm font-medium transition">
                    <i data-lucide="pencil" class="w-4 h-4"></i> Edit Laporan
                </a>

                <form action="{{ route('activity.selesai', $activity->id) }}" method="POST">
                    @csrf
                    <button type="submit" onclick="return confirm('Tandai kegiatan ini sebagai selesai?')"
                        class="inline-flex items-center gap-2 bg-green-500 hover:bg-green-600 text-white px-5 py-2.5 rounded-lg text-sm font-medium transition">
                        <i data-lucide="check" class="w-4 h-4"></i> Selesaikan Kegiatan
                    </button>
                </form>
                @endif
            </div>
        </div>

        {{-- KANAN: SIDEBAR DETAIL --}}
        <div class="space-y-4">
            {{-- Lampiran --}}
            <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
                <h4 class="font-semibold mb-4 flex items-center gap-2 text-[#0D215C]">
                    <i data-lucide="paperclip" class="w-4 h-4"></i> Lampiran
                </h4>

                @if($activity->lampiran)
                <div class="flex items-center gap-3 bg-red-50 border border-red-100 rounded-xl px-4 py-3 mb-4">
                    <div class="w-10 h-10 rounded-lg bg-red-100 flex items-center justify-center">
                        <i data-lucide="image" class="w-5 h-5 text-red-500"></i>
                    </div>
                    <div class="min-w-0">
                        <p class="text-sm font-medium text-slate-700 truncate">{{ $shortName }}</p>
                        <p class="text-xs text-slate-400">File Lampiran</p>
                    </div>
                </div>
                <div class="grid grid-cols-2 gap-2">
                    <a href="{{ rtrim(env('BACKEND_API_URL', 'http://127.0.0.1:8000'), '/api') . '/storage/' . $activity->lampiran }}" target="_blank"
                       class="flex items-center justify-center gap-2 border border-slate-200 hover:bg-slate-50 text-slate-700 py-2 rounded-lg text-sm transition">
                        <i data-lucide="eye" class="w-4 h-4"></i> Lihat
                    </a>
                    <a href="{{ rtrim(env('BACKEND_API_URL', 'http://127.0.0.1:8000'), '/api') . '/storage/' . $activity->lampiran }}" download
                       class="flex items-center justify-center gap-2 border border-slate-200 hover:bg-slate-50 text-slate-700 py-2 rounded-lg text-sm transition">
                        <i data-lucide="download" class="w-4 h-4"></i> Unduh
                    </a>
                </div>
                @else
                <div class="text-center py-4 border-2 border-dashed border-slate-100 rounded-xl">
                    <p class="text-sm text-slate-400 italic">Tidak ada lampiran</p>
                </div>
                @endif
            </div>

            {{-- Metadata --}}
            <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
                <h4 class="font-semibold mb-4 text-[#0D215C]">Meta Data</h4>
                <div class="space-y-3 text-sm">
                    <div class="flex justify-between text-slate-600">
                        <span>ID Laporan</span>
                        <span class="font-mono text-xs">#ACT-{{ str_pad($activity->id, 5, '0', STR_PAD_LEFT) }}</span>
                    </div>
                    <div class="flex justify-between text-slate-600">
                        <span>Metode</span>
                        <span>{{ $activity->metode ?? 'Luring' }}</span>
                    </div>
                </div>
            </div>

            <a href="{{ route('activity.list') }}" class="block text-center text-sm text-blue-600 hover:text-blue-800 transition py-2">
                ← Kembali ke Daftar Laporan
            </a>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    });
</script>
@endsection