@extends('layouts.app')

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

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div>
            <p class="pkbm-dashboard__breadcrumb"><span>Standar Kompetensi Lulusan</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Tracer Alumni</p>
            <h1 class="pkbm-dashboard__title">Tracer Alumni</h1>
            <p class="pkbm-dashboard__subtitle">Bagikan formulir publik dan pantau perkembangan alumni setelah lulus.</p>
        </div>
    </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 pengaturan link.</p><ul class="mt-1 list-inside list-disc">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div></div>
    @endif

    <section class="grid gap-5 lg:grid-cols-[minmax(0,1.3fr)_minmax(18rem,.7fr)]">
        <article class="sp-card overflow-hidden">
            <div class="sp-card-header"><h2 class="sp-section-title">Link formulir publik</h2><p class="mt-1 text-xs text-slate-500">Bagikan link ini kepada alumni untuk mengisi tracer.</p></div>
            <div class="flex flex-col gap-3 p-4 sm:flex-row sm:items-center">
                <label for="tracer-public-link" class="sr-only">Link tracer alumni publik</label>
                <input id="tracer-public-link" readonly value="{{ $link }}" class="sp-form-control min-w-0 flex-1 px-3 py-2.5 text-sm font-semibold text-blue-700">
                <button type="button" class="sp-btn-primary justify-center" data-copy-link><i class="bi bi-copy" aria-hidden="true"></i>Salin link</button>
                <a class="sp-btn-secondary justify-center" href="{{ $link }}" target="_blank" rel="noopener"><i class="bi bi-box-arrow-up-right" aria-hidden="true"></i>Pratinjau</a>
            </div>
        </article>
        <article class="sp-card flex items-center gap-4 p-5">
            <span class="grid size-12 shrink-0 place-items-center rounded-2xl bg-blue-50 text-blue-600"><i class="bi bi-people text-xl" aria-hidden="true"></i></span>
            <div><p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Respons masuk</p><p class="mt-1 text-2xl font-bold text-slate-800">{{ number_format($totalResponses, 0, ',', '.') }}</p><p class="mt-1 text-xs text-slate-500">Respons tracer alumni tercatat</p></div>
        </article>
    </section>

    <form method="POST" action="{{ route('pkbm.tracer-alumni.link.update') }}" class="sp-card">
        @csrf
        @method('PUT')
        <div class="sp-card-header"><h2 class="sp-section-title">Pengaturan alamat link</h2><p class="mt-1 text-xs text-slate-500">Gunakan akhiran link yang mudah dibagikan atau kosongkan untuk memakai link otomatis.</p></div>
        <div class="flex flex-col gap-3 p-4 sm:flex-row sm:items-end">
            <div class="min-w-0 flex-1">
                <label for="custom-slug" class="sp-form-label">Akhiran link (slug)</label>
                <div class="flex items-center gap-2"><span class="shrink-0 text-xs text-slate-500">{{ url('/tracer-alumni') }}/</span><input id="custom-slug" type="text" name="custom_slug" value="{{ old('custom_slug', $slug === md5((string) auth()->user()->id_pkbm) ? '' : $slug) }}" maxlength="80" pattern="[a-z0-9]+(?:-[a-z0-9]+)*" class="sp-form-control min-w-0 flex-1 px-3 py-2.5 text-sm" placeholder="tracer-alumni-pkbm"></div>
                <p class="mt-1 text-xs text-slate-500">Huruf kecil, angka, dan tanda hubung. Link otomatis tetap tersedia jika kolom dikosongkan.</p>
            </div>
            <button type="submit" class="sp-btn-primary justify-center"><i class="bi bi-link-45deg" aria-hidden="true"></i>Simpan link</button>
        </div>
    </form>

    <section class="sp-card overflow-hidden">
        <div class="sp-card-header flex flex-wrap items-end justify-between gap-3">
            <div><h2 class="sp-section-title">Respons alumni</h2><p class="mt-1 text-xs text-slate-500">Ringkasan jawaban tracer yang dikirim melalui link publik.</p></div>
            <form method="GET" action="{{ route('pkbm.tracer-alumni.index') }}" class="flex flex-wrap items-end gap-2">
                <label for="filter-tahun-lulus" class="sp-form-label mb-0">Tahun lulus
                    <select id="filter-tahun-lulus" name="tahun_lulus" class="sp-form-control mt-1 px-3 py-2 text-sm">
                        <option value="">Semua tahun</option>
                        @foreach ($years as $option)
                            <option value="{{ $option }}" @selected(($filters['tahun_lulus'] ?? '') === $option)>{{ $option }}</option>
                        @endforeach
                    </select>
                </label>
                <button type="submit" class="sp-btn-secondary"><i class="bi bi-funnel" aria-hidden="true"></i>Filter</button>
                <a href="{{ route('pkbm.tracer-alumni.print', request()->query()) }}" target="_blank" rel="noopener" class="sp-btn-primary"><i class="bi bi-printer" aria-hidden="true"></i>Cetak tracer</a>
            </form>
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-[72rem]">
                <thead><tr><th class="w-14 text-center">No.</th><th>Nama alumni</th><th class="text-center">Tahun lulus</th><th>Status sekarang</th><th>Detail</th><th class="text-center">Dikirim</th></tr></thead>
                <tbody>
                    @forelse ($responses as $response)
                        <tr>
                            <td class="text-center">{{ $responses->firstItem() + $loop->index }}</td>
                            <th scope="row" class="font-semibold text-slate-800">{{ $response->nama_siswa }}<span class="mt-1 block text-xs font-normal text-slate-500">NIS {{ $response->nis ?: '-' }} · NISN {{ $response->nisn ?: '-' }}</span></th>
                            <td class="text-center">{{ $response->tahun_lulus }}</td>
                            <td>
                                <div class="flex flex-wrap gap-1">
                                    @foreach ($response->status_sekarang as $status)
                                        <span class="rounded-full bg-blue-50 px-2.5 py-1 text-xs font-semibold text-blue-700">{{ ['sekolah' => 'Sekolah/kuliah', 'bekerja' => 'Bekerja', 'usaha' => 'Usaha', 'lainnya' => 'Lainnya'][$status] ?? $status }}</span>
                                    @endforeach
                                </div>
                            </td>
                            <td class="text-sm leading-6">
                                @if (in_array('sekolah', $response->status_sekarang, true))<div><strong>Sekolah:</strong> {{ $response->nama_sekolah }} · {{ $response->jenjang_sekolah }}{{ $response->jurusan_sekolah ? ' · '.$response->jurusan_sekolah : '' }}{{ $response->lokasi_sekolah ? ' · '.$response->lokasi_sekolah : '' }}</div>@endif
                                @if (in_array('bekerja', $response->status_sekarang, true))<div><strong>Bekerja:</strong> {{ $response->nama_perusahaan }} · {{ $response->jabatan }}{{ $response->bidang_pekerjaan ? ' · '.$response->bidang_pekerjaan : '' }}{{ $response->lokasi_pekerjaan ? ' · '.$response->lokasi_pekerjaan : '' }}</div>@endif
                                @if (in_array('usaha', $response->status_sekarang, true))<div><strong>Usaha:</strong> {{ $response->nama_usaha }} · {{ $response->bidang_usaha }}{{ $response->tahun_mulai_usaha ? ' · sejak '.$response->tahun_mulai_usaha : '' }}{{ $response->lokasi_usaha ? ' · '.$response->lokasi_usaha : '' }}</div>@endif
                                @if (in_array('lainnya', $response->status_sekarang, true))<div><strong>Lainnya:</strong> {{ $response->kegiatan_lainnya }}</div>@endif
                            </td>
                            <td class="text-center text-xs">{{ \Carbon\Carbon::parse($response->updated_at)->format('d/m/Y H:i') }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="6" class="py-8 text-center text-sm text-slate-500">Belum ada respons tracer alumni.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($responses->hasPages())
            <div class="p-4">{{ $responses->links() }}</div>
        @endif
    </section>
</div>
@push('scripts')
<script>
document.querySelector('[data-copy-link]')?.addEventListener('click', async (event) => {
    const button = event.currentTarget;
    try {
        await navigator.clipboard.writeText(document.getElementById('tracer-public-link').value);
        button.innerHTML = '<i class="bi bi-check-lg" aria-hidden="true"></i>Tersalin';
        setTimeout(() => { button.innerHTML = '<i class="bi bi-copy" aria-hidden="true"></i>Salin link'; }, 1800);
    } catch (error) {
        document.getElementById('tracer-public-link').select();
        document.execCommand('copy');
        button.innerHTML = '<i class="bi bi-check-lg" aria-hidden="true"></i>Tersalin';
        setTimeout(() => { button.innerHTML = '<i class="bi bi-copy" aria-hidden="true"></i>Salin link'; }, 1800);
    }
});
</script>
@endpush
@endsection