@extends('layouts.app')

@section('title', 'Pengaturan Link SPMB')

@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 Pengelolaan</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Manajemen SPMB</p>
            <h1 class="pkbm-dashboard__title">Pengaturan Link SPMB</h1>
            <p class="pkbm-dashboard__subtitle">Atur tautan, kuota, serta jadwal pendaftaran peserta didik baru.</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">Permintaan belum dapat diproses.</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-4 lg:grid-cols-[minmax(0,1.4fr)_minmax(16rem,.6fr)]">
        <article class="sp-card overflow-hidden">
            <div class="sp-card-header"><h2 class="sp-section-title">Tautan pendaftaran</h2><p class="mt-1 text-xs text-slate-500">Bagikan tautan ini kepada calon peserta didik.</p></div>
            <div class="flex flex-col gap-3 p-4 sm:flex-row sm:items-center">
                <label for="spmb-public-link" class="sr-only">Link pendaftaran publik</label>
                <input id="spmb-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 {{ $isOnline ? 'bg-emerald-50 text-emerald-600' : 'bg-slate-100 text-slate-500' }}"><i class="bi {{ $isOnline ? 'bi-broadcast' : 'bi-broadcast-pin' }} text-xl" aria-hidden="true"></i></span>
            <div><p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Status pendaftaran</p><p class="mt-1 text-lg font-bold {{ $isOnline ? 'text-emerald-700' : 'text-slate-700' }}">{{ $isOnline ? 'Sedang dibuka' : 'Ditutup' }}</p><p class="mt-1 text-xs text-slate-500">{{ $registered }} pendaftar masuk</p></div>
        </article>
    </section>

    <form method="POST" action="{{ route('pkbm.spmb.settings.update') }}" class="grid items-start gap-5 lg:grid-cols-2">
        @csrf
        @method('PUT')
        <section class="sp-card">
            <div class="sp-card-header"><h2 class="sp-section-title">Jadwal pendaftaran</h2><p class="mt-1 text-xs text-slate-500">Kosongkan kedua tanggal untuk mengikuti status buka/tutup secara manual.</p></div>
            <div class="space-y-4 p-5">
                <div class="grid gap-4 sm:grid-cols-2">
                    <div><label for="tgl-buka" class="sp-form-label">Dibuka pada</label><input id="tgl-buka" type="datetime-local" name="tgl_buka" value="{{ old('tgl_buka', $settings?->tgl_buka ? \Carbon\CarbonImmutable::parse($settings->tgl_buka)->format('Y-m-d\TH:i') : '') }}" class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                    <div><label for="tgl-tutup" class="sp-form-label">Ditutup pada</label><input id="tgl-tutup" type="datetime-local" name="tgl_tutup" value="{{ old('tgl_tutup', $settings?->tgl_tutup ? \Carbon\CarbonImmutable::parse($settings->tgl_tutup)->format('Y-m-d\TH:i') : '') }}" class="sp-form-control w-full px-3 py-2.5 text-sm"></div>
                </div>
                <div><label for="pesan-tutup" class="sp-form-label">Pesan ketika pendaftaran ditutup</label><textarea id="pesan-tutup" name="pesan_tutup" rows="4" maxlength="1000" required class="sp-form-control w-full px-3 py-2.5 text-sm" placeholder="Sampaikan informasi penutupan kepada calon peserta">{{ old('pesan_tutup', $settings?->pesan_tutup ?: 'Mohon maaf, pendaftaran saat ini sedang ditutup.') }}</textarea></div>
            </div>
        </section>
        <div class="space-y-5">
            <section class="sp-card">
                <div class="sp-card-header"><h2 class="sp-section-title">Status & tautan</h2></div>
                <div class="space-y-4 p-5">
                    <fieldset>
                        <legend class="sp-form-label">Status pendaftaran</legend>
                        <div class="grid grid-cols-2 gap-2">
                            @foreach (['Buka' => 'Buka pendaftaran', 'Tutup' => 'Tutup pendaftaran'] as $value => $label)
                                <label @class(['cursor-pointer rounded-xl border p-3 text-center text-sm font-semibold transition', 'border-blue-300 bg-blue-50 text-blue-800' => old('status_ppdb', $settings?->status_ppdb ?? 'Tutup') === $value, 'border-slate-200 text-slate-600 hover:bg-slate-50' => old('status_ppdb', $settings?->status_ppdb ?? 'Tutup') !== $value])>
                                    <input type="radio" name="status_ppdb" value="{{ $value }}" required class="sr-only" @checked(old('status_ppdb', $settings?->status_ppdb ?? 'Tutup') === $value)>
                                    <i class="bi {{ $value === 'Buka' ? 'bi-unlock' : 'bi-lock' }} mr-1" aria-hidden="true"></i>{{ $label }}
                                </label>
                            @endforeach
                        </div>
                    </fieldset>
                    <div><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('/spmb') }}/</span><input id="custom-slug" type="text" name="custom_slug" value="{{ old('custom_slug', $settings?->custom_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="pendaftaran-pkbm"></div><p class="mt-1 text-xs text-slate-500">Huruf kecil, angka, dan tanda hubung. Kosongkan untuk menggunakan link otomatis.</p></div>
                    <div><label for="kuota" class="sp-form-label">Kuota pendaftar</label><input id="kuota" type="number" name="kuota_pendaftaran" min="0" max="100000" required value="{{ old('kuota_pendaftaran', $settings?->kuota_pendaftaran ?? 0) }}" class="sp-form-control w-full px-3 py-2.5 text-sm"><p class="mt-1 text-xs text-slate-500">Nilai 0 berarti tidak dibatasi kuota.</p></div>
                </div>
            </section>
            <div class="flex justify-end"><button type="submit" class="sp-btn-primary"><i class="bi bi-cloud-check" aria-hidden="true"></i>Simpan pengaturan</button></div>
        </div>
    </form>
</div>
@push('scripts')
<script>
document.querySelector('[data-copy-link]')?.addEventListener('click', async (event) => {
    const button = event.currentTarget;
    try {
        await navigator.clipboard.writeText(document.getElementById('spmb-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('spmb-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