@extends('layouts.app')

@section('styles')
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    "colors": {
                        "outline": "#737780",
                        "on-surface-variant": "var(--tw-on-surface-variant)",
                        "on-tertiary-fixed": "#161c22",
                        "surface-container": "var(--tw-surface-container)",
                        "primary-fixed-dim": "#a7c8ff",
                        "outline-variant": "var(--tw-outline-variant)",
                        "on-primary": "#ffffff",
                        "surface-container-low": "var(--tw-surface-container-low)",
                        "tertiary-container": "#2e343a",
                        "on-surface": "var(--tw-on-surface)",
                        "background": "var(--tw-background)",
                        "tertiary-fixed-dim": "#c1c7cf",
                        "primary-container": "#003366",
                        "secondary-fixed-dim": "#acc7ff",
                        "on-tertiary": "#ffffff",
                        "on-secondary-fixed": "#001a40",
                        "on-tertiary-fixed-variant": "#41474e",
                        "surface-container-highest": "#d3e4fe",
                        "surface-container-lowest": "var(--tw-surface-container-lowest)",
                        "surface-bright": "#f8f9ff",
                        "inverse-on-surface": "#eaf1ff",
                        "surface-tint": "#3a5f94",
                        "on-primary-fixed-variant": "#1f477b",
                        "on-secondary": "#ffffff",
                        "on-secondary-container": "#003370",
                        "secondary": "#115cb9",
                        "surface-variant": "var(--tw-surface-variant)",
                        "on-error": "#ffffff",
                        "on-primary-fixed": "#001b3c",
                        "on-error-container": "#93000a",
                        "secondary-container": "#659dfe",
                        "inverse-primary": "#a7c8ff",
                        "on-primary-container": "#799dd6",
                        "surface-dim": "#cbdbf5",
                        "on-tertiary-container": "#969ca4",
                        "tertiary-fixed": "#dde3eb",
                        "tertiary": "#191f25",
                        "surface": "var(--tw-background)",
                        "on-background": "var(--tw-on-surface)",
                        "inverse-surface": "#213145",
                        "secondary-fixed": "#d7e2ff",
                        "error": "#ba1a1a",
                        "primary": "var(--tw-primary)",
                        "surface-container-high": "#dce9ff",
                        "primary-fixed": "#d5e3ff",
                        "on-secondary-fixed-variant": "#004491",
                        "error-container": "#ffdad6"
                    },
                    "borderRadius": {
                        "DEFAULT": "0.25rem",
                        "lg": "0.5rem",
                        "xl": "0.75rem",
                        "full": "9999px"
                    },
                    "spacing": {
                        "margin-desktop": "2.5rem",
                        "gutter": "1.5rem",
                        "stack-md": "1rem",
                        "margin-mobile": "1rem",
                        "container-max": "1280px",
                        "stack-lg": "2rem",
                        "stack-sm": "0.5rem"
                    },
                    "fontFamily": {
                        "body-lg": ["Plus Jakarta Sans"],
                        "headline-md": ["Plus Jakarta Sans"],
                        "display-lg": ["Plus Jakarta Sans"],
                        "title-lg": ["Plus Jakarta Sans"],
                        "headline-lg": ["Plus Jakarta Sans"],
                        "headline-lg-mobile": ["Plus Jakarta Sans"],
                        "body-md": ["Plus Jakarta Sans"],
                        "label-md": ["Plus Jakarta Sans"],
                        "caption": ["Plus Jakarta Sans"]
                    },
                    "fontSize": {
                        "body-lg": ["18px", { "lineHeight": "28px", "fontWeight": "400" }],
                        "headline-md": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
                        "display-lg": ["48px", { "lineHeight": "60px", "letterSpacing": "-0.02em", "fontWeight": "700" }],
                        "title-lg": ["20px", { "lineHeight": "28px", "fontWeight": "600" }],
                        "headline-lg": ["32px", { "lineHeight": "40px", "fontWeight": "700" }],
                        "headline-lg-mobile": ["24px", { "lineHeight": "32px", "fontWeight": "700" }],
                        "body-md": ["16px", { "lineHeight": "24px", "fontWeight": "400" }],
                        "label-md": ["14px", { "lineHeight": "20px", "fontWeight": "500" }],
                        "caption": ["12px", { "lineHeight": "16px", "fontWeight": "400" }]
                    }
                }
            }
        }
    </script>

@endsection

@section('content')


<!-- Main Content -->
<main class="flex-grow w-full max-w-container-max mx-auto px-margin-desktop py-stack-lg mt-8">
<!-- Breadcrumb -->
<nav aria-label="Breadcrumb" class="flex items-center gap-2 mb-stack-lg text-on-surface-variant font-label-md text-label-md">
<a class="hover:text-primary transition-colors" href="{{ route('home') }}">Beranda</a>
<span class="material-symbols-outlined text-[16px]">chevron_right</span>
<span class="text-on-surface font-medium">Peserta Magang Diterima</span>
</nav>

<!-- Header Section -->
<div class="mb-stack-lg">
<h1 class="font-headline-lg text-headline-lg md:font-display-lg md:text-display-lg text-on-surface mb-stack-sm">Peserta Magang Diterima</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-3xl">Daftar peserta yang telah resmi diterima dalam program magang di lingkungan Pemerintah Kabupaten Bogor.</p>
</div>
<!-- Filters & Search -->
<div class="bg-surface-container-lowest p-gutter rounded-lg shadow-[0px_4px_20px_rgba(0,0,0,0.05)] border-t-4 border-primary mb-stack-lg">
<div class="grid grid-cols-1 md:grid-cols-12 gap-stack-md items-end">
<div class="md:col-span-5 flex flex-col gap-stack-sm">
<label class="font-label-md text-label-md text-on-surface" for="search">Cari Peserta</label>
<div class="relative">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<span class="material-symbols-outlined text-outline">search</span>
</div>
<input class="bg-surface border border-outline-variant text-on-surface text-sm rounded-lg focus:ring-secondary focus:border-secondary block w-full ps-10 p-2.5" id="search" placeholder="Cari nama peserta..." type="text"/>
</div>
</div>
<div class="md:col-span-3 flex flex-col gap-stack-sm">
<label class="font-label-md text-label-md text-on-surface" for="dinas">Tujuan Dinas</label>
<select class="bg-surface border border-outline-variant text-on-surface text-sm rounded-lg focus:ring-secondary focus:border-secondary block w-full p-2.5" id="dinas">
<option selected="">Semua Dinas</option>
<option value="1">Dinas Komunikasi dan Informatika</option>
<option value="2">Dinas Kesehatan</option>
<option value="3">Dinas Pendidikan</option>
</select>
</div>
<div class="md:col-span-4 flex flex-col gap-stack-sm">
<label class="font-label-md text-label-md text-on-surface" for="instansi">Instansi Pendidikan</label>
<select class="bg-surface border border-outline-variant text-on-surface text-sm rounded-lg focus:ring-secondary focus:border-secondary block w-full p-2.5" id="instansi">
<option selected="">Semua Instansi Pendidikan</option>
<option value="1">Universitas Indonesia</option>
<option value="2">Institut Pertanian Bogor</option>
<option value="3">Universitas Pakuan</option>
</select>
</div>
</div>
</div>
<!-- Data Table -->
<div class="bg-surface-container-lowest rounded-lg shadow-[0px_4px_20px_rgba(0,0,0,0.05)] overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full text-left font-body-md text-body-md text-on-surface">
<thead class="font-label-md text-label-md uppercase bg-[#F1F5F9] text-on-surface-variant">
<tr>
<th class="px-6 py-4" scope="col">Nama Peserta</th>
<th class="px-6 py-4" scope="col">Jurusan</th>
<th class="px-6 py-4" scope="col">Asal Instansi</th>
<th class="px-6 py-4" scope="col">Tujuan Dinas</th>
<th class="px-6 py-4" scope="col">Bidang</th>
<th class="px-6 py-4" scope="col">Tanggal Diterima</th>
<th class="px-6 py-4" scope="col">Tanggal Berakhir</th>
<th class="px-6 py-4" scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-[#E2E8F0] hover:bg-surface-container-low transition-colors">
<td class="px-6 py-4 font-medium text-primary">Ahmad Fajri</td>
<td class="px-6 py-4">Ilmu Komputer</td>
<td class="px-6 py-4">Institut Pertanian Bogor</td>
<td class="px-6 py-4">Dinas Komunikasi dan Informatika</td>
<td class="px-6 py-4">Aplikasi Informatika</td>
<td class="px-6 py-4">12 Okt 2023</td>
<td class="px-6 py-4">12 Jan 2024</td>
<td class="px-6 py-4">
<span class="bg-[#DCFCE7] text-[#166534] font-label-md text-caption uppercase px-2 py-1 rounded">DITERIMA</span>
</td>
</tr>
<tr class="border-b border-[#E2E8F0] hover:bg-surface-container-low transition-colors">
<td class="px-6 py-4 font-medium text-primary">Siti Nurhaliza</td>
<td class="px-6 py-4">Farmasi</td>
<td class="px-6 py-4">Universitas Pakuan</td>
<td class="px-6 py-4">Dinas Kesehatan</td>
<td class="px-6 py-4">Sumber Daya Kesehatan</td>
<td class="px-6 py-4">15 Okt 2023</td>
<td class="px-6 py-4">15 Jan 2024</td>
<td class="px-6 py-4">
<span class="bg-[#DCFCE7] text-[#166534] font-label-md text-caption uppercase px-2 py-1 rounded">DITERIMA</span>
</td>
</tr>
<tr class="border-b border-[#E2E8F0] hover:bg-surface-container-low transition-colors">
<td class="px-6 py-4 font-medium text-primary">Budi Santoso</td>
<td class="px-6 py-4">Perencanaan Wilayah Kota</td>
<td class="px-6 py-4">Universitas Indonesia</td>
<td class="px-6 py-4">BAPPEDA LITBANG</td>
<td class="px-6 py-4">Penelitian dan Pengembangan</td>
<td class="px-6 py-4">18 Okt 2023</td>
<td class="px-6 py-4">18 Jan 2024</td>
<td class="px-6 py-4">
<span class="bg-[#DCFCE7] text-[#166534] font-label-md text-caption uppercase px-2 py-1 rounded">DITERIMA</span>
</td>
</tr>
<tr class="border-b border-[#E2E8F0] hover:bg-surface-container-low transition-colors">
<td class="px-6 py-4 font-medium text-primary">Rina Melati</td>
<td class="px-6 py-4">Administrasi Bisnis</td>
<td class="px-6 py-4">Politeknik Negeri Jakarta</td>
<td class="px-6 py-4">Dinas Kependudukan dan Pencatatan Sipil</td>
<td class="px-6 py-4">Pelayanan Pendaftaran Penduduk</td>
<td class="px-6 py-4">20 Okt 2023</td>
<td class="px-6 py-4">20 Jan 2024</td>
<td class="px-6 py-4">
<span class="bg-[#DCFCE7] text-[#166534] font-label-md text-caption uppercase px-2 py-1 rounded">DITERIMA</span>
</td>
</tr>
<tr class="border-b border-[#E2E8F0] hover:bg-surface-container-low transition-colors">
<td class="px-6 py-4 font-medium text-primary">Dewi Lestari</td>
<td class="px-6 py-4">Pariwisata</td>
<td class="px-6 py-4">Universitas Gunadarma</td>
<td class="px-6 py-4">Dinas Pariwisata dan Kebudayaan</td>
<td class="px-6 py-4">Pemasaran Pariwisata</td>
<td class="px-6 py-4">22 Okt 2023</td>
<td class="px-6 py-4">22 Jan 2024</td>
<td class="px-6 py-4">
<span class="bg-[#DCFCE7] text-[#166534] font-label-md text-caption uppercase px-2 py-1 rounded">DITERIMA</span>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="px-6 py-4 border-t border-[#E2E8F0] flex items-center justify-between">
<span class="text-sm text-on-surface-variant">Menampilkan 1 - 5 dari 124 data</span>
<div class="inline-flex items-center -space-x-px">
<a class="block px-3 py-2 ms-0 leading-tight text-on-surface-variant bg-surface-container-lowest border border-outline-variant rounded-s-lg hover:bg-surface-container-low hover:text-primary" href="{{ route('home') }}">
<span class="material-symbols-outlined text-[18px]">chevron_left</span>
</a>
<a aria-current="page" class="z-10 px-3 py-2 leading-tight text-primary-container border border-outline-variant bg-surface-container-high hover:bg-surface-container-highest hover:text-primary-container" href="{{ route('home') }}">1</a>
<a class="px-3 py-2 leading-tight text-on-surface-variant bg-surface-container-lowest border border-outline-variant hover:bg-surface-container-low hover:text-primary" href="{{ route('home') }}">2</a>
<a class="px-3 py-2 leading-tight text-on-surface-variant bg-surface-container-lowest border border-outline-variant hover:bg-surface-container-low hover:text-primary" href="{{ route('home') }}">3</a>
<a class="px-3 py-2 leading-tight text-on-surface-variant bg-surface-container-lowest border border-outline-variant hover:bg-surface-container-low hover:text-primary" href="{{ route('home') }}">4</a>
<span class="px-3 py-2 leading-tight text-on-surface-variant bg-surface-container-lowest border border-outline-variant">...</span>
<a class="block px-3 py-2 leading-tight text-on-surface-variant bg-surface-container-lowest border border-outline-variant rounded-e-lg hover:bg-surface-container-low hover:text-primary" href="{{ route('home') }}">
<span class="material-symbols-outlined text-[18px]">chevron_right</span>
</a>
</div>
</div>
</div>
</main>




@endsection


