@extends('user.layouts.app')

@section('content')

{{-- PAGE TITLE --}}
<div style="margin-bottom:28px; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 4px; flex-wrap: wrap; gap: 16px;">
    <div>
        <div style="font-size:26px; font-weight:700; color:#0D215C; font-family:'Outfit', sans-serif;">
            Riwayat Aktivitas
        </div>
        <div style="font-size:14px; color:#6b7280; margin-top:6px; font-family:'Outfit', sans-serif;">
            Daftar seluruh laporan kegiatan yang telah Anda kirimkan.
        </div>
    </div>
    <a href="{{ route('input.activity') }}" 
       style="text-decoration:none; background:#1d4ed8; color:white; padding:10px 24px; border-radius:10px; font-size:13px; font-weight:600; transition:.2s; display: flex; align-items: center; gap: 8px;">
        <i data-lucide="plus" style="width: 16px; height: 16px;"></i>
        Input Baru
    </a>
</div>

{{-- LIST CONTAINER --}}
<div style="display: flex; flex-direction: column; gap: 16px;">

    @forelse($activities as $item)
    <div class="card" style="padding: 20px; background: white; border-radius: 16px; border: 1px solid #f1f5f9; box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: .2s;" 
         onmouseover="this.style.borderColor='#1d4ed8'; this.style.transform='translateY(-2px)'" 
         onmouseout="this.style.borderColor='#f1f5f9'; this.style.transform='translateY(0)'">
        
        <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;">
            
            <div style="display: flex; gap: 16px; align-items: center;">
                {{-- Icon Box --}}
                <div style="width: 52px; height: 52px; background: #eff6ff; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #1d4ed8; flex-shrink: 0;">
                    <i data-lucide="clipboard-list" style="width: 26px; height: 26px;"></i>
                </div>

                <div>
                    <div style="font-size: 17px; font-weight: 700; color: #1e293b; margin-bottom: 6px;">
                        {{ $item->nama_kegiatan }}
                    </div>
                    <div style="display: flex; gap: 15px; align-items: center; flex-wrap: wrap;">
                        <span style="font-size: 13px; color: #64748b; display: flex; align-items: center; gap: 6px;">
                            <i data-lucide="user" style="width: 14px; height: 14px;"></i>
                            <strong style="color: #475569;">{{ $item->user->name ?? 'Pegawai' }}</strong>
                        </span>
                        <span style="font-size: 13px; color: #64748b; display: flex; align-items: center; gap: 6px;">
                            <i data-lucide="calendar" style="width: 14px; height: 14px;"></i>
                            {{ $item->tanggal ? \Carbon\Carbon::parse($item->tanggal)->translatedFormat('d M Y') : '-' }}
                            @if(!empty($item->tanggal_selesai))
                                - {{ \Carbon\Carbon::parse($item->tanggal_selesai)->translatedFormat('d M Y') }}
                            @endif
                        </span>
                        <span style="font-size: 13px; color: #64748b; display: flex; align-items: center; gap: 6px;">
                            <i data-lucide="map-pin" style="width: 14px; height: 14px;"></i>
                            {{ $item->lokasi ?? '-' }}
                        </span>
                    </div>
                </div>
            </div>

            <div style="display: flex; align-items: center; gap: 20px;">
                {{-- Badge Status --}}
                @php
                    $status = $item->status ?? 'on_progres';
                    $isSelesai = $status === 'selesai';
                    $isOverdue = !empty($item->tanggal_selesai) && \Carbon\Carbon::parse($item->tanggal_selesai)->isPast() && !$isSelesai && $status !== 'telah_ditinjau';
                @endphp
                <span style="padding: 6px 14px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
                    {{ $isSelesai ? 'background:#dcfce7; color:#15803d;' : ($isOverdue ? 'background:#fef2f2; color:#dc2626; border:1px solid #fecaca;' : 'background:#eff6ff; color:#1d4ed8;') }}">
                    {{ $isSelesai ? 'Selesai' : ($isOverdue ? 'Terlambat' : 'On Progres') }}
                </span>

                {{-- Action Button --}}
                <a href="{{ route('activity.detail', $item->id) }}" 
                   style="text-decoration: none; color: #1d4ed8; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 8px; transition: .2s;"
                   onmouseover="this.style.background='#eff6ff'"
                   onmouseout="this.style.background='transparent'">
                    Detail
                    <i data-lucide="chevron-right" style="width: 18px; height: 18px;"></i>
                </a>
            </div>

        </div>
    </div>
    @empty
    {{-- EMPTY STATE --}}
    <div style="text-align: center; padding: 80px 20px; background: white; border-radius: 20px; border: 2px dashed #e2e8f0;">
        <div style="background: #f8fafc; width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;">
            <i data-lucide="inbox" style="width: 36px; height: 36px; color: #cbd5e1;"></i>
        </div>
        <div style="font-size: 18px; font-weight: 700; color: #475569;">Belum Ada Aktivitas</div>
        <div style="font-size: 14px; color: #94a3b8; margin-top: 6px; max-width: 300px; margin-left: auto; margin-right: auto;">
            Laporan kegiatan yang Anda kirimkan nantinya akan muncul di daftar ini.
        </div>
        <a href="{{ route('input.activity') }}" style="display: inline-block; margin-top: 24px; color: #1d4ed8; font-weight: 600; font-size: 14px; text-decoration: none;">
            Mulai buat laporan pertama →
        </a>
    </div>
    @endforelse

</div>

{{-- Script untuk memastikan icon Lucide muncul --}}
<script>
    document.addEventListener("DOMContentLoaded", function() {
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    });
</script>

@endsection