@extends('layouts.app')

@section('title', 'Tracer Alumni')

@section('content')
@php($selectedStatuses = is_array(old('status_sekarang')) ? old('status_sekarang') : [])
<main class="public-spmb tracer-public-form min-h-screen bg-slate-50 px-4 py-5 sm:px-6 sm:py-8">
    <div class="mx-auto max-w-4xl space-y-5">
        <div class="flex items-center justify-between gap-4 rounded-2xl border border-blue-100 bg-white px-4 py-3 shadow-sm sm:px-5">
            <div class="flex min-w-0 items-center gap-3">
                <span class="grid size-11 shrink-0 place-items-center overflow-hidden rounded-xl border border-slate-100 bg-white"><img src="{{ asset('images/logo.png') }}" alt="" class="size-full object-contain p-1"></span>
                <div class="min-w-0"><p class="truncate text-sm font-extrabold tracking-wide text-[#173b67]">SMARTPenF</p><p class="mt-0.5 truncate text-[11px] text-slate-500">Tracer alumni</p></div>
            </div>
            <span class="inline-flex shrink-0 items-center gap-2 rounded-full border border-blue-100 bg-blue-50 px-3 py-1.5 text-xs font-semibold text-blue-700"><i class="bi bi-globe2" aria-hidden="true"></i>Formulir publik</span>
        </div>

        <header class="public-spmb__hero rounded-2xl px-5 py-5 text-white shadow-md sm:px-7 sm:py-6">
            <p class="flex items-center gap-2 text-xs font-semibold text-blue-100"><span>Tracer Alumni</span><i class="bi bi-chevron-right text-[9px]" aria-hidden="true"></i><span>Data lulusan</span></p>
            <h1 class="mt-2 text-xl font-bold tracking-tight sm:text-2xl">{{ $school->nama_pkbm }}</h1>
            <p class="mt-2 text-sm text-blue-50">Ceritakan kegiatan Anda saat ini agar lembaga dapat mengikuti perkembangan alumni.</p>
        </header>

        @if (session('status'))
            <div role="status" class="settings-notice settings-notice--success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i><span>{{ session('status') }}</span></div>
        @endif
        @if ($errors->any())
            <div role="alert" class="settings-notice settings-notice--error"><i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i><div><p class="font-semibold">Periksa kembali data yang diisi:</p><ul class="mt-2 list-inside list-disc space-y-1">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div></div>
        @endif

        <section class="sp-card overflow-hidden">
            <div class="sp-card-header">
                <h2 class="sp-section-title"><i class="bi bi-calendar2-week mr-1.5 text-blue-600" aria-hidden="true"></i>Pilih tahun lulus</h2>
                <p class="mt-1 text-xs text-slate-500">Nama alumni akan ditampilkan sesuai tahun lulus yang dipilih.</p>
            </div>
            <form method="GET" action="{{ route('public.tracer-alumni.show', $slug) }}" class="flex flex-col gap-3 p-5 sm:flex-row sm:items-end">
                <div class="flex-1"><label for="tahun-lulus" class="sp-form-label">Tahun lulus <span class="text-rose-600">*</span></label><select id="tahun-lulus" name="tahun_lulus" required class="sp-form-control w-full px-3 py-2.5 text-sm"><option value="">Pilih tahun lulus</option>@foreach ($years as $option)<option value="{{ $option }}" @selected($year === $option)>{{ $option }}</option>@endforeach</select></div>
                <button type="submit" class="sp-btn-primary justify-center"><i class="bi bi-search" aria-hidden="true"></i>Tampilkan alumni</button>
            </form>
            @if ($years->isEmpty())
                <p class="px-5 pb-5 text-sm text-slate-500">Belum ada data kelulusan yang dapat dipilih.</p>
            @endif
        </section>

        @if ($year)
            @if ($students->isEmpty())
                <section class="sp-card p-5 text-center text-sm text-slate-500">Belum ada nama alumni pada tahun {{ $year }}.</section>
            @else
                <form method="POST" action="{{ route('public.tracer-alumni.submit', ['slug' => $slug, 'tahun_lulus' => $year]) }}" class="space-y-5">
                    @csrf
                    <input type="hidden" name="tahun_lulus" value="{{ $year }}">
                    <div hidden aria-hidden="true"><label for="website">Website</label><input id="website" type="text" name="website" tabindex="-1" autocomplete="off"></div>

                    <section class="sp-card overflow-hidden">
                        <div class="sp-card-header"><h2 class="sp-section-title"><i class="bi bi-person-vcard mr-1.5 text-blue-600" aria-hidden="true"></i>Identitas alumni</h2></div>
                        <div class="p-5">
                            <label for="id-siswa" class="sp-form-label">Nama alumni <span class="text-rose-600">*</span></label>
                            <select id="id-siswa" name="id_siswa" required class="sp-form-control w-full px-3 py-2.5 text-sm">
                                <option value="">Pilih nama sesuai data</option>
                                @foreach ($students as $student)
                                    <option value="{{ $student->id }}" @selected((string) old('id_siswa') === (string) $student->id)>{{ $student->nama_siswa }}</option>
                                @endforeach
                            </select>
                            @error('id_siswa')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
                        </div>
                    </section>

                    <section class="sp-card overflow-hidden">
                        <div class="sp-card-header">
                            <h2 class="sp-section-title"><i class="bi bi-activity mr-1.5 text-blue-600" aria-hidden="true"></i>Status sekarang</h2>
                            <p class="mt-1 text-xs text-slate-500">Pilih satu atau beberapa status yang sesuai.</p>
                        </div>
                        <div class="grid gap-3 p-5 sm:grid-cols-2">
                            @foreach ($statuses as $value => $label)
                                <label class="flex cursor-pointer items-start gap-3 rounded-xl border border-slate-200 p-4 text-sm font-semibold text-slate-700 hover:bg-slate-50">
                                    <input type="checkbox" name="status_sekarang[]" value="{{ $value }}" @checked(in_array($value, $selectedStatuses, true)) data-tracer-status class="mt-0.5 size-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500">
                                    <span>{{ $label }}</span>
                                </label>
                            @endforeach
                        </div>
                        @error('status_sekarang')<p class="px-5 pb-4 text-xs text-rose-600">{{ $message }}</p>@enderror
                    </section>

                    <section class="sp-card space-y-5 p-5 sm:p-6">
                        <fieldset data-status-panel="sekolah" hidden>
                            <legend class="sp-section-title"><i class="bi bi-mortarboard mr-1.5 text-blue-600" aria-hidden="true"></i>Informasi sekolah/kuliah</legend>
                            <div class="mt-4 grid gap-4 sm:grid-cols-2">
                                <div><label for="nama-sekolah" class="sp-form-label">Nama sekolah/perguruan tinggi <span class="text-rose-600">*</span></label><input id="nama-sekolah" name="nama_sekolah" value="{{ old('nama_sekolah') }}" maxlength="150" data-required class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                                <div><label for="jenjang-sekolah" class="sp-form-label">Jenjang/tingkat <span class="text-rose-600">*</span></label><input id="jenjang-sekolah" name="jenjang_sekolah" value="{{ old('jenjang_sekolah') }}" maxlength="100" data-required class="sp-form-control w-full px-3 py-2.5 text-sm" placeholder="Contoh: SMA, S1, semester 2"></div>
                                <div><label for="jurusan-sekolah" class="sp-form-label">Jurusan/program studi</label><input id="jurusan-sekolah" name="jurusan_sekolah" value="{{ old('jurusan_sekolah') }}" maxlength="150" class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                                <div><label for="lokasi-sekolah" class="sp-form-label">Kota/lokasi</label><input id="lokasi-sekolah" name="lokasi_sekolah" value="{{ old('lokasi_sekolah') }}" maxlength="150" class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                            </div>
                        </fieldset>
                        <fieldset data-status-panel="bekerja" hidden>
                            <legend class="sp-section-title"><i class="bi bi-briefcase mr-1.5 text-blue-600" aria-hidden="true"></i>Informasi pekerjaan</legend>
                            <div class="mt-4 grid gap-4 sm:grid-cols-2">
                                <div><label for="nama-perusahaan" class="sp-form-label">Nama perusahaan/tempat kerja <span class="text-rose-600">*</span></label><input id="nama-perusahaan" name="nama_perusahaan" value="{{ old('nama_perusahaan') }}" maxlength="150" data-required class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                                <div><label for="jabatan" class="sp-form-label">Jabatan/pekerjaan <span class="text-rose-600">*</span></label><input id="jabatan" name="jabatan" value="{{ old('jabatan') }}" maxlength="150" data-required class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                                <div><label for="bidang-pekerjaan" class="sp-form-label">Bidang pekerjaan</label><input id="bidang-pekerjaan" name="bidang_pekerjaan" value="{{ old('bidang_pekerjaan') }}" maxlength="150" class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                                <div><label for="lokasi-pekerjaan" class="sp-form-label">Kota/lokasi kerja</label><input id="lokasi-pekerjaan" name="lokasi_pekerjaan" value="{{ old('lokasi_pekerjaan') }}" maxlength="150" class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                            </div>
                        </fieldset>
                        <fieldset data-status-panel="usaha" hidden>
                            <legend class="sp-section-title"><i class="bi bi-shop mr-1.5 text-blue-600" aria-hidden="true"></i>Informasi usaha</legend>
                            <div class="mt-4 grid gap-4 sm:grid-cols-2">
                                <div><label for="nama-usaha" class="sp-form-label">Nama usaha <span class="text-rose-600">*</span></label><input id="nama-usaha" name="nama_usaha" value="{{ old('nama_usaha') }}" maxlength="150" data-required class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                                <div><label for="bidang-usaha" class="sp-form-label">Bidang usaha <span class="text-rose-600">*</span></label><input id="bidang-usaha" name="bidang_usaha" value="{{ old('bidang_usaha') }}" maxlength="150" data-required class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                                <div><label for="tahun-mulai-usaha" class="sp-form-label">Mulai tahun <span class="text-rose-600">*</span></label><input id="tahun-mulai-usaha" type="number" name="tahun_mulai_usaha" value="{{ old('tahun_mulai_usaha') }}" min="1900" max="{{ now()->year }}" data-required class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                                <div><label for="lokasi-usaha" class="sp-form-label">Kota/lokasi usaha</label><input id="lokasi-usaha" name="lokasi_usaha" value="{{ old('lokasi_usaha') }}" maxlength="150" class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                            </div>
                        </fieldset>
                        <fieldset data-status-panel="lainnya" hidden>
                            <legend class="sp-section-title"><i class="bi bi-three-dots mr-1.5 text-blue-600" aria-hidden="true"></i>Kegiatan lainnya</legend>
                            <div class="mt-4"><label for="kegiatan-lainnya" class="sp-form-label">Ceritakan kegiatan saat ini <span class="text-rose-600">*</span></label><textarea id="kegiatan-lainnya" name="kegiatan_lainnya" rows="4" maxlength="2000" data-required class="sp-form-control w-full px-3 py-2.5 text-sm">{{ old('kegiatan_lainnya') }}</textarea></div>
                        </fieldset>
                    </section>

                    <section class="sp-card p-5 sm:p-6">
                        <p class="text-sm leading-6 text-slate-600">Dengan mengirim formulir ini, Anda menyetujui data tracer digunakan oleh {{ $school->nama_pkbm }} untuk pendataan dan tindak lanjut alumni.</p>
                        <button type="submit" class="sp-btn-primary mt-4 w-full justify-center sm:w-auto"><i class="bi bi-send-check" aria-hidden="true"></i>Kirim data tracer</button>
                    </section>
                </form>
            @endif
        @endif
    </div>
</main>
@push('scripts')
<script>
const statusCheckboxes = document.querySelectorAll('[data-tracer-status]');
const updateTracerPanels = () => {
    document.querySelectorAll('[data-status-panel]').forEach((panel) => {
        const selected = [...statusCheckboxes].some((checkbox) => checkbox.checked && checkbox.value === panel.dataset.statusPanel);
        panel.hidden = !selected;
        panel.querySelectorAll('[data-required]').forEach((field) => { field.required = selected; });
    });
};
statusCheckboxes.forEach((checkbox) => checkbox.addEventListener('change', updateTracerPanels));
updateTracerPanels();
</script>
@endpush
@endsection