spota-dev/rebuild/resources/views/admin/pages/mahasiswa-import.blade.php

<x-admin.partials.page-shell :title="$title" :sidebar="$sidebar">
    <section class="rounded-xl bg-white p-4 shadow-[0_8px_12px_rgba(13,10,44,0.04)] lg:p-6">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
            <div>
                <ol class="flex flex-wrap items-center gap-2 text-sm text-[#6B7280]">
                    <li class="inline-flex items-center gap-2">
                        <span class="text-[#625DF5]">@include('dashboard.partials.icon', ['icon' => 'home'])</span>
                        <span>Home</span>
                    </li>
                    <li>/</li>
                    <li class="font-medium text-[#15171A]">{{ $pageTitle }}</li>
                </ol>
                <h1 class="mt-4 text-[26px] font-bold leading-[34px] text-[#15171A]">{{ $pageTitle }}</h1>
                <p class="mt-2 max-w-[880px] text-sm leading-7 text-[#4B5563]">{{ $pageDescription }}</p>
            </div>
            <div class="flex flex-wrap items-center gap-3">
                <div class="rounded-md border border-[#E5E7EB] bg-[#F9FAFB] px-4 py-3 text-sm text-[#15171A]">{{ $pageDate }}</div>
                <div class="rounded-md border border-[#E5E7EB] bg-[#F9FAFB] px-4 py-3 text-sm text-[#15171A]">{{ $user['username'] }} · {{ $user['nmprodi'] }}</div>
            </div>
        </div>
    </section>

    @if (session('error'))
        <div class="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800">{{ session('error') }}</div>
    @endif

    @if ($errors->any())
        <div class="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800">
            <p class="font-semibold">Import belum bisa diproses.</p>
            <ul class="mt-2 list-disc space-y-1 pl-5">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="grid gap-5 lg:grid-cols-[minmax(0,1fr)_420px]">
        <form method="POST" action="{{ route('admin.data.mahasiswa.import.store', [], false) }}" enctype="multipart/form-data" class="rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-[0_8px_12px_rgba(13,10,44,0.04)]">
            @csrf
            <div class="grid gap-5">
                <div>
                    <label class="text-sm font-semibold text-[#15171A]">File CSV</label>
                    <input type="file" name="csv" accept=".csv,text/csv,text/plain" class="mt-2 w-full rounded-md border border-[#D1D5DB] px-4 py-3 text-sm" required>
                    <p class="mt-2 text-xs leading-5 text-[#6B7280]">Maksimal 5 MB. Baris pertama harus berisi header.</p>
                </div>

                <div>
                    <label class="text-sm font-semibold text-[#15171A]">Mode Import</label>
                    <select name="mode" class="mt-2 w-full rounded-md border border-[#D1D5DB] px-4 py-3 text-sm">
                        <option value="insert_only">Tambah data baru saja</option>
                        <option value="upsert">Tambah dan update jika NIM sudah ada</option>
                    </select>
                </div>

                <div>
                    <label class="text-sm font-semibold text-[#15171A]">Password Default</label>
                    <input type="text" name="default_password" value="123456" class="mt-2 w-full rounded-md border border-[#D1D5DB] px-4 py-3 text-sm">
                    <p class="mt-2 text-xs leading-5 text-[#6B7280]">Dipakai jika kolom `password` kosong atau tidak ada pada baris mahasiswa baru.</p>
                </div>

                <div class="flex flex-wrap gap-3 border-t border-[#E5E7EB] pt-5">
                    <button class="rounded-md bg-[#15171A] px-5 py-2.5 text-sm font-medium text-white hover:opacity-90">Import CSV</button>
                    <a href="{{ route('admin.data.mahasiswa', [], false) }}" class="rounded-md border border-[#D1D5DB] bg-white px-5 py-2.5 text-sm font-medium text-[#15171A] hover:bg-[#F9FAFB]">Batal</a>
                </div>
            </div>
        </form>

        <aside class="space-y-5">
            <section class="rounded-xl border border-[#E5E7EB] bg-white p-5 shadow-[0_8px_12px_rgba(13,10,44,0.04)]">
                <h2 class="text-lg font-semibold text-[#15171A]">Format Header</h2>
                <p class="mt-3 text-sm leading-7 text-[#6B7280]">Header wajib:</p>
                <div class="mt-3 flex flex-wrap gap-2">
                    @foreach ($requiredHeaders as $header)
                        <span class="rounded-full bg-[#625DF5]/10 px-3 py-1 text-xs font-semibold text-[#625DF5]">{{ $header }}</span>
                    @endforeach
                </div>
                <p class="mt-5 text-sm leading-7 text-[#6B7280]">Header opsional:</p>
                <div class="mt-3 flex flex-wrap gap-2">
                    @foreach ($optionalHeaders as $header)
                        <span class="rounded-full bg-[#F9FAFB] px-3 py-1 text-xs font-semibold text-[#4B5563]">{{ $header }}</span>
                    @endforeach
                </div>
            </section>

            <section class="rounded-xl border border-[#E5E7EB] bg-white p-5 shadow-[0_8px_12px_rgba(13,10,44,0.04)]">
                <h2 class="text-lg font-semibold text-[#15171A]">Contoh CSV</h2>
                <pre class="mt-4 overflow-x-auto rounded-lg bg-[#15171A] p-4 text-xs leading-6 text-white"><code>nim,nama,email,thnmasuk,password,status,noHP,noHPOrtu,bolehUploadDraft
D1041231001,Budi Saputra,budi@example.com,2023,123456,A,08123456789,08129876543,1
D1041231002,Siti Aminah,siti@example.com,2023,,A,,,1</code></pre>
            </section>
        </aside>
    </div>
</x-admin.partials.page-shell>