
<?php $__env->startSection('content'); ?>

<!-- Page Header -->
<div class="mb-stack-lg">
<h2 class="text-headline-lg font-headline-lg text-on-surface mb-2">Penempatan Peserta</h2>
<p class="text-body-lg font-body-lg text-on-surface-variant">Daftar peserta yang telah berhasil ditempatkan di instansi tujuan.</p>
</div>
<!-- Data Table Card (Level 1 Surface) -->
<div class="bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border border-outline-variant/30 overflow-hidden flex flex-col">
<!-- Table Toolbar -->
<div class="p-6 border-b border-outline-variant/30 flex flex-col sm:flex-row justify-between items-center gap-4 bg-surface/50">
<!-- Search Input -->
<div class="relative w-full sm:w-80">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-[20px]">search</span>
<input class="w-full pl-10 pr-4 py-2.5 bg-surface-container-lowest border border-outline-variant rounded-lg text-body-md font-body-md text-on-surface focus:outline-none focus:border-primary-container focus:ring-1 focus:ring-primary-container transition-shadow placeholder:text-outline/70" placeholder="Cari nama peserta atau instansi..." type="text"/>
</div>
<!-- Actions -->
<div class="flex gap-3 w-full sm:w-auto">
<button class="flex items-center justify-center gap-2 px-4 py-2.5 border border-outline-variant rounded-lg text-label-md font-label-md text-on-surface-variant hover:bg-surface-container-low transition-colors w-full sm:w-auto">
<span class="material-symbols-outlined text-[18px]">filter_list</span>
                            Filter
                        </button>
<button class="flex items-center justify-center gap-2 px-4 py-2.5 bg-primary-container text-white rounded-lg text-label-md font-label-md hover:bg-primary-container/90 transition-colors shadow-sm w-full sm:w-auto">
<span class="material-symbols-outlined text-[18px]">download</span>
                            Ekspor CSV
                        </button>
</div>
</div>
<!-- Table Container -->
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<!-- Table Header -->
<thead class="bg-[#F1F5F9] text-on-surface-variant border-b border-outline-variant/30">
<tr>
<th class="py-4 px-6 text-label-md font-label-md uppercase tracking-wider font-semibold whitespace-nowrap">Nama Peserta</th>
<th class="py-4 px-6 text-label-md font-label-md uppercase tracking-wider font-semibold whitespace-nowrap">Asal Instansi</th>
<th class="py-4 px-6 text-label-md font-label-md uppercase tracking-wider font-semibold whitespace-nowrap">Dinas Tujuan</th>
<th class="py-4 px-6 text-label-md font-label-md uppercase tracking-wider font-semibold whitespace-nowrap">Bidang</th>
<th class="py-4 px-6 text-label-md font-label-md uppercase tracking-wider font-semibold whitespace-nowrap">Tanggal Diterima</th>
<th class="py-4 px-6 text-label-md font-label-md uppercase tracking-wider font-semibold whitespace-nowrap">Status</th>
<th class="py-4 px-6 text-label-md font-label-md uppercase tracking-wider font-semibold text-right whitespace-nowrap">AKSI</th>
</tr>
</thead>
<!-- Table Body -->
<tbody class="text-body-md font-body-md text-on-surface divide-y divide-[#E2E8F0]">
<!-- Row 1 -->
<tr class="table-row-hover">
<td class="py-4 px-6 font-medium">Ahmad Fauzi</td>
<td class="py-4 px-6 text-on-surface-variant">Universitas Indonesia</td>
<td class="py-4 px-6">Dinas Komunikasi dan Informatika</td>
<td class="py-4 px-6 text-on-surface-variant">Pengembangan Perangkat Lunak</td>
<td class="py-4 px-6 text-on-surface-variant">12 Okt 2023</td>
<td class="py-4 px-6">
<span class="inline-flex items-center px-2.5 py-1 rounded-md text-caption font-label-md bg-status-success-bg text-status-success-text border border-status-success-text/20">
<span class="w-1.5 h-1.5 rounded-full bg-status-success-text mr-1.5"></span>
                                        DITERIMA
                                    </span>
</td>
<td class="py-4 px-6 text-right"><a href="<?php echo e(route('kesbangpol.placement.show', 1)); ?>" class="inline-flex items-center gap-2 px-3 py-1.5 bg-secondary-container/20 text-secondary hover:bg-secondary-container/30 rounded-lg transition-colors text-label-md font-label-md"><span class="material-symbols-outlined text-[18px]">visibility</span> Lihat Detail </a></td>
</tr>
<!-- Row 2 -->
<tr class="table-row-hover">
<td class="py-4 px-6 font-medium">Siti Nurhaliza</td>
<td class="py-4 px-6 text-on-surface-variant">Institut Pertanian Bogor</td>
<td class="py-4 px-6">Dinas Pertanian</td>
<td class="py-4 px-6 text-on-surface-variant">Penyuluhan Pertanian</td>
<td class="py-4 px-6 text-on-surface-variant">15 Okt 2023</td>
<td class="py-4 px-6">
<span class="inline-flex items-center px-2.5 py-1 rounded-md text-caption font-label-md bg-status-success-bg text-status-success-text border border-status-success-text/20">
<span class="w-1.5 h-1.5 rounded-full bg-status-success-text mr-1.5"></span>
                                        DITERIMA
                                    </span>
</td>
<td class="py-4 px-6 text-right"><a href="<?php echo e(route('kesbangpol.placement.show', 1)); ?>" class="inline-flex items-center gap-2 px-3 py-1.5 bg-secondary-container/20 text-secondary hover:bg-secondary-container/30 rounded-lg transition-colors text-label-md font-label-md"><span class="material-symbols-outlined text-[18px]">visibility</span> Lihat Detail </a></td>
</tr>
<!-- Row 3 -->
<tr class="table-row-hover">
<td class="py-4 px-6 font-medium">Kevin Sanjaya</td>
<td class="py-4 px-6 text-on-surface-variant">SMK Negeri 1 Cibinong</td>
<td class="py-4 px-6">Dinas Kependudukan dan Catatan Sipil</td>
<td class="py-4 px-6 text-on-surface-variant">Administrasi Perkantoran</td>
<td class="py-4 px-6 text-on-surface-variant">18 Okt 2023</td>
<td class="py-4 px-6">
<span class="inline-flex items-center px-2.5 py-1 rounded-md text-caption font-label-md bg-status-success-bg text-status-success-text border border-status-success-text/20">
<span class="w-1.5 h-1.5 rounded-full bg-status-success-text mr-1.5"></span>
                                        DITERIMA
                                    </span>
</td>
<td class="py-4 px-6 text-right"><a href="<?php echo e(route('kesbangpol.placement.show', 1)); ?>" class="inline-flex items-center gap-2 px-3 py-1.5 bg-secondary-container/20 text-secondary hover:bg-secondary-container/30 rounded-lg transition-colors text-label-md font-label-md"><span class="material-symbols-outlined text-[18px]">visibility</span> Lihat Detail </a></td>
</tr>
<!-- Row 4 -->
<tr class="table-row-hover">
<td class="py-4 px-6 font-medium">Dewi Lestari</td>
<td class="py-4 px-6 text-on-surface-variant">Universitas Pakuan</td>
<td class="py-4 px-6">Dinas Kesehatan</td>
<td class="py-4 px-6 text-on-surface-variant">Kesehatan Masyarakat</td>
<td class="py-4 px-6 text-on-surface-variant">20 Okt 2023</td>
<td class="py-4 px-6">
<span class="inline-flex items-center px-2.5 py-1 rounded-md text-caption font-label-md bg-status-success-bg text-status-success-text border border-status-success-text/20">
<span class="w-1.5 h-1.5 rounded-full bg-status-success-text mr-1.5"></span>
                                        DITERIMA
                                    </span>
</td>
<td class="py-4 px-6 text-right"><a href="<?php echo e(route('kesbangpol.placement.show', 1)); ?>" class="inline-flex items-center gap-2 px-3 py-1.5 bg-secondary-container/20 text-secondary hover:bg-secondary-container/30 rounded-lg transition-colors text-label-md font-label-md"><span class="material-symbols-outlined text-[18px]">visibility</span> Lihat Detail </a></td>
</tr>
<!-- Row 5 -->
<tr class="table-row-hover">
<td class="py-4 px-6 font-medium">Rizky Pratama</td>
<td class="py-4 px-6 text-on-surface-variant">Universitas Gunadarma</td>
<td class="py-4 px-6">Badan Perencanaan Pembangunan Daerah</td>
<td class="py-4 px-6 text-on-surface-variant">Analisis Data Spasial</td>
<td class="py-4 px-6 text-on-surface-variant">21 Okt 2023</td>
<td class="py-4 px-6">
<span class="inline-flex items-center px-2.5 py-1 rounded-md text-caption font-label-md bg-status-success-bg text-status-success-text border border-status-success-text/20">
<span class="w-1.5 h-1.5 rounded-full bg-status-success-text mr-1.5"></span>
                                        DITERIMA
                                    </span>
</td>
<td class="py-4 px-6 text-right"><a href="<?php echo e(route('kesbangpol.placement.show', 1)); ?>" class="inline-flex items-center gap-2 px-3 py-1.5 bg-secondary-container/20 text-secondary hover:bg-secondary-container/30 rounded-lg transition-colors text-label-md font-label-md"><span class="material-symbols-outlined text-[18px]">visibility</span> Lihat Detail </a></td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination Footer -->
<div class="px-6 py-4 border-t border-outline-variant/30 flex items-center justify-between bg-surface-container-lowest">
<span class="text-caption font-caption text-on-surface-variant">Menampilkan 1 hingga 5 dari 42 entri</span>
<div class="flex gap-1">
<button class="p-1.5 text-on-surface-variant hover:bg-surface-container-low rounded-md disabled:opacity-50" disabled="">
<span class="material-symbols-outlined text-[20px]">chevron_left</span>
</button>
<button class="w-8 h-8 flex items-center justify-center rounded-md bg-primary-container text-white text-label-md font-label-md">1</button>
<button class="w-8 h-8 flex items-center justify-center rounded-md text-on-surface hover:bg-surface-container-low text-label-md font-label-md transition-colors">2</button>
<button class="w-8 h-8 flex items-center justify-center rounded-md text-on-surface hover:bg-surface-container-low text-label-md font-label-md transition-colors">3</button>
<span class="w-8 h-8 flex items-center justify-center text-on-surface-variant">...</span>
<button class="p-1.5 text-on-surface-variant hover:bg-surface-container-low rounded-md transition-colors">
<span class="material-symbols-outlined text-[20px]">chevron_right</span>
</button>
</div>
</div>
</div>

<?php $__env->stopSection(); ?>


<?php echo $__env->make('layouts.kesbangpol_stitch', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\Users\arjun\Documents\Magang\Project Magang\simalam\resources\views/kesbangpol/participants/placement.blade.php ENDPATH**/ ?>