@extends('layouts.user')

@section('title', 'Pekerjaan On-Progress - CV. Amelia Langgeng Jaya')

@section('content')
{{-- Hero Section --}}
<div class="relative h-[400px] overflow-hidden">
    <img src="{{ asset('images/unnamed.png') }}" class="w-full h-full object-cover">
    <div class="absolute inset-0 bg-blue-900/60 flex items-center justify-center text-center">
        <div data-aos="fade-up">
            <h1 class="text-4xl md:text-5xl font-black text-white uppercase tracking-tight">
                Pekerjaan yang Sedang <br>
                <span class="text-orange-500">Dikerjakan</span>
            </h1>
        </div>
    </div>
</div>

<section class="py-20 bg-white">
    <div class="container mx-auto px-6">
        <div class="overflow-x-auto bg-white rounded-3xl shadow-2xl border border-slate-100" data-aos="fade-up">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-blue-900 text-white">
                        <th class="px-6 py-5 text-sm font-black uppercase tracking-widest text-center border-r border-white/10 w-16">No.</th>
                        <th class="px-6 py-5 text-sm font-black uppercase tracking-widest border-r border-white/10">Nama Paket Pekerjaan</th>
                        <th class="px-6 py-5 text-sm font-black uppercase tracking-widest border-r border-white/10">Lokasi</th>
                        <th class="px-6 py-5 text-sm font-black uppercase tracking-widest border-r border-white/10">Pemberi Tugas/PPK</th>
                        <th class="px-6 py-5 text-sm font-black uppercase tracking-widest border-r border-white/10 text-center">Kontrak</th>
                        <th class="px-6 py-5 text-sm font-black uppercase tracking-widest text-center">Tahun</th>
                    </tr>
                </thead>
                <tbody class="text-slate-700 font-medium">
                    {{-- Loop data dari database --}}
                    @forelse($proyek_berjalan as $index => $proyek)
                    <tr class="border-b border-slate-100 hover:bg-slate-50 transition-colors">
                        <td class="px-6 py-5 text-center border-r border-slate-100 font-bold text-blue-900">
                            {{ $index + 1 }}.
                        </td>
                        <td class="px-6 py-5 border-r border-slate-100 text-sm italic uppercase">
                            {{-- SESUAI MIGRATION: nama_paket_pekerjaan --}}
                            {{ $proyek->nama_paket_pekerjaan }}
                        </td>
                        <td class="px-6 py-5 border-r border-slate-100 text-sm uppercase">
                            {{-- SESUAI MIGRATION: lokasi_proyek --}}
                            {{ $proyek->lokasi_proyek }}
                        </td>
                        <td class="px-6 py-5 border-r border-slate-100 text-sm font-bold text-blue-800 uppercase">
                            {{-- SESUAI MIGRATION: ppk_proyek --}}
                            {{ $proyek->ppk_proyek }}
                        </td>
                        <td class="px-6 py-5 border-r border-slate-100 text-sm text-center font-black text-orange-600">
                            {{-- SESUAI MIGRATION: kontrak --}}
                            {{ $proyek->kontrak }}
                        </td>
                        <td class="px-6 py-5 text-sm text-center font-bold">
                            {{-- SESUAI MIGRATION: tahun_proyek --}}
                            {{ $proyek->tahun_proyek }}
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="px-6 py-20 text-center">
                            <div class="flex flex-col items-center justify-center space-y-3">
                                <svg class="w-12 h-12 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                                </svg>
                                <span class="text-slate-400 italic">Belum ada data pekerjaan yang sedang berjalan.</span>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</section>
@endsection