@extends('layouts.app')

@section('title', 'Pengaturan PKBM')

@section('content')
<div class="pkbm-settings mx-auto max-w-7xl space-y-5">
    <header class="pkbm-settings__heading">
        <div>
            <p class="pkbm-dashboard__breadcrumb"><span>Data Utama</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Pengaturan Akademik</p>
            <h1 class="pkbm-dashboard__title">Pengaturan periode PKBM</h1>
            <p class="pkbm-dashboard__subtitle">Kelola periode belajar, data kepala PKBM, dan tanda tangan dokumen resmi.</p>
        </div>
        <div class="pkbm-settings__period">
            <span class="pkbm-settings__period-icon"><i class="bi bi-calendar2-week" aria-hidden="true"></i></span>
            <span>
                <span class="pkbm-settings__period-label">Riwayat periode</span>
                <span class="pkbm-settings__period-value">{{ $settings->count() }} periode tersimpan</span>
            </span>
        </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 data yang diisi.</p>
                <ul class="mt-1 list-inside list-disc">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    <div class="grid items-start gap-5 xl:grid-cols-[minmax(19rem,0.78fr)_minmax(0,1.5fr)]">
        <section class="sp-card settings-form-card overflow-hidden">
            <div class="settings-panel-heading">
                <span class="settings-panel-heading__icon">
                    <i class="bi {{ $editing ? 'bi-pencil-square' : 'bi-calendar2-plus' }}" aria-hidden="true"></i>
                </span>
                <div>
                    <h2 class="sp-section-title">{{ $editing ? 'Edit periode akademik' : 'Tambah periode baru' }}</h2>
                    <p class="mt-1 text-xs text-slate-500">
                        {{ $editing ? 'Perbarui informasi periode yang dipilih.' : 'Periode baru akan langsung menjadi periode aktif.' }}
                    </p>
                </div>
            </div>

            <div class="p-5 sm:p-6">
                <form method="POST"
                      action="{{ $editing ? route('pkbm.settings.update', $editing->id) : route('pkbm.settings.store') }}"
                      enctype="multipart/form-data"
                      class="settings-form space-y-4">
                    @csrf
                    @if ($editing)
                        @method('PUT')
                    @endif

                    <div class="settings-form__period-fields grid gap-4 sm:grid-cols-2">
                        <div>
                            <label for="tahun_pelajaran" class="sp-form-label">Tahun pelajaran <span class="text-rose-500">*</span></label>
                            <input id="tahun_pelajaran" name="tahun_pelajaran" value="{{ old('tahun_pelajaran', $editing->tahun_pelajaran ?? '') }}" placeholder="2026/2027" inputmode="numeric" required
                                   class="sp-form-control w-full px-3 py-2.5 text-sm">
                            @error('tahun_pelajaran')<p class="mt-1 text-xs text-rose-700">{{ $message }}</p>@enderror
                        </div>

                        <div>
                            <label for="semester" class="sp-form-label">Semester <span class="text-rose-500">*</span></label>
                            <select id="semester" name="semester" required class="sp-form-control w-full px-3 py-2.5 text-sm">
                                <option value="">Pilih semester</option>
                                @foreach (['Ganjil', 'Genap'] as $semester)
                                    <option value="{{ $semester }}" @selected(old('semester', $editing->semester ?? '') === $semester)>{{ $semester }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div>
                        <label for="kepala_sekolah" class="sp-form-label">Nama kepala PKBM <span class="text-rose-500">*</span></label>
                        <input id="kepala_sekolah" name="kepala_sekolah" value="{{ old('kepala_sekolah', $editing->kepala_sekolah ?? '') }}" required
                               class="sp-form-control w-full px-3 py-2.5 text-sm">
                    </div>

                    <div>
                        <label for="nuptk_kepsek" class="sp-form-label">NIP/NUPTK <span class="font-normal text-slate-400">(opsional)</span></label>
                        <input id="nuptk_kepsek" name="nuptk_kepsek" value="{{ old('nuptk_kepsek', $editing->nuptk_kepsek ?? '') }}"
                               class="sp-form-control w-full px-3 py-2.5 text-sm">
                    </div>

                    <div>
                        <label for="tanggal_raport" class="sp-form-label">Tanggal dokumen/rapor <span class="text-rose-500">*</span></label>
                        <input id="tanggal_raport" type="date" name="tanggal_raport" value="{{ old('tanggal_raport', $editing->tanggal_raport ?? '') }}" required
                               class="sp-form-control w-full px-3 py-2.5 text-sm">
                    </div>

                    <div class="signature-upload">
                        <label for="tanda_tangan" class="sp-form-label">Tanda tangan digital <span class="font-normal text-slate-400">(opsional)</span></label>
                        <input id="tanda_tangan" type="file" name="tanda_tangan" accept="image/png,image/jpeg"
                               class="sp-form-control block w-full px-3 py-2 text-sm file:mr-3 file:rounded-md file:border-0 file:bg-blue-50 file:px-3 file:py-1.5 file:font-semibold file:text-blue-700">
                        <p class="mt-1.5 text-[11px] text-slate-500">Format PNG atau JPG, ukuran maksimal 2 MB.</p>
                        @if ($editing && $editing->tanda_tangan_kepsek)
                            <p class="mt-2 flex items-center gap-1.5 text-xs font-medium text-emerald-700">
                                <i class="bi bi-check-circle-fill" aria-hidden="true"></i>
                                Tanda tangan tersimpan
                            </p>
                        @endif
                    </div>

                    <div class="settings-form__actions flex flex-wrap gap-2">
                        <button type="submit" class="sp-btn-primary">
                            <i class="bi {{ $editing ? 'bi-check2-circle' : 'bi-plus-circle' }}" aria-hidden="true"></i>
                            {{ $editing ? 'Simpan perubahan' : 'Simpan & aktifkan' }}
                        </button>
                        @if ($editing)
                            <a href="{{ route('pkbm.settings.index') }}" class="sp-btn-secondary">Batal edit</a>
                        @endif
                    </div>
                </form>
            @if ($editing && $editing->tanda_tangan_kepsek)
                <form method="POST" action="{{ route('pkbm.settings.signature.destroy', $editing->id) }}" class="mt-3">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="settings-delete-signature">
                        <i class="bi bi-trash3" aria-hidden="true"></i>Hapus tanda tangan tersimpan
                    </button>
                </form>
            @endif
        </div>
    </section>

    <section class="sp-card settings-history-card overflow-hidden">
        <div class="sp-card-header settings-history-card__header">
            <div>
                <h2 class="sp-section-title">Riwayat periode</h2>
                <p class="mt-1 text-xs text-slate-500">Periode akademik yang pernah dan sedang digunakan.</p>
            </div>
            <span class="settings-history-count">{{ $settings->count() }} data</span>
        </div>
        @if ($settings->isNotEmpty())
            <div class="settings-active-period">
                <span class="settings-active-period__icon"><i class="bi bi-patch-check-fill" aria-hidden="true"></i></span>
                <span class="settings-active-period__copy">
                    <span class="settings-active-period__label">Periode yang sedang aktif</span>
                    @php($activeSetting = $settings->firstWhere('aktif', 1))
                    @if ($activeSetting)
                        <span class="settings-active-period__value">{{ $activeSetting->tahun_pelajaran }} · Semester {{ $activeSetting->semester }}</span>
                    @else
                        <span class="settings-active-period__value">Belum ada periode aktif</span>
                    @endif
                </span>
            </div>
        @endif
        <div class="overflow-x-auto">
            <table class="sp-table settings-history-table min-w-[680px]">
                <thead>
                    <tr>
                        <th scope="col">Tahun / semester</th>
                        <th scope="col">Kepala PKBM</th>
                        <th scope="col">Tanda tangan</th>
                        <th scope="col">Status</th>
                        <th scope="col" class="text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($settings as $setting)
                        <tr>
                            <td>
                                <span class="block font-bold text-slate-900">{{ $setting->tahun_pelajaran }}</span>
                                <span class="mt-0.5 block text-xs text-slate-500">Semester {{ $setting->semester }}</span>
                            </td>
                            <td>
                                <span class="block max-w-52 truncate font-semibold text-slate-800">{{ $setting->kepala_sekolah }}</span>
                                <span class="mt-0.5 block text-xs text-slate-500">NIP/NUPTK: {{ $setting->nuptk_kepsek ?: '-' }}</span>
                            </td>
                            <td>
                                @if ($setting->tanda_tangan_kepsek)
                                    <span class="signature-status signature-status--present"><i class="bi bi-check-circle-fill" aria-hidden="true"></i> Ada</span>
                                @else
                                    <span class="signature-status signature-status--missing"><i class="bi bi-dash-circle" aria-hidden="true"></i> Belum ada</span>
                                @endif
                            </td>
                            <td>
                                @if ($setting->aktif)
                                    <span class="sp-status-active"><span class="settings-status-dot"></span>Aktif</span>
                                @else
                                    <span class="settings-status-inactive">Nonaktif</span>
                                @endif
                            </td>
                            <td>
                                <div class="settings-row-actions">
                                    @unless ($setting->aktif)
                                        <form method="POST" action="{{ route('pkbm.settings.activate', $setting->id) }}">
                                            @csrf
                                            @method('PATCH')
                                            <button type="submit" class="settings-icon-action settings-icon-action--activate" aria-label="Aktifkan periode {{ $setting->tahun_pelajaran }} {{ $setting->semester }}" title="Aktifkan periode">
                                                <i class="bi bi-check2-circle" aria-hidden="true"></i>
                                            </button>
                                        </form>
                                    @endunless
                                    <a href="{{ route('pkbm.settings.index', ['edit' => $setting->id]) }}" class="settings-icon-action" aria-label="Edit periode {{ $setting->tahun_pelajaran }} {{ $setting->semester }}" title="Edit periode">
                                        <i class="bi bi-pencil-square" aria-hidden="true"></i>
                                    </a>
                                    <form method="POST" action="{{ route('pkbm.settings.destroy', $setting->id) }}" onsubmit="return confirm('Hapus riwayat pengaturan ini?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="settings-icon-action settings-icon-action--delete" aria-label="Hapus periode {{ $setting->tahun_pelajaran }} {{ $setting->semester }}" title="Hapus periode">
                                            <i class="bi bi-trash3" aria-hidden="true"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5">
                                <div class="settings-empty-state">
                                    <span><i class="bi bi-calendar2-plus" aria-hidden="true"></i></span>
                                    <strong>Belum ada periode akademik</strong>
                                    <p>Tambahkan periode pertama untuk mulai mengatur kegiatan belajar.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
</div>
@endsection