@extends('layouts.app')

@section('title', 'Atur Nilai')

@section('content')
<div class="pkbm-master-page pkbm-grade-settings mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div>
            <p class="pkbm-dashboard__breadcrumb"><span>Standar Penilaian</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Manajemen Raport<i class="bi bi-chevron-right" aria-hidden="true"></i>Atur Nilai</p>
            <h1 class="pkbm-dashboard__title">Atur Nilai</h1>
            <p class="pkbm-dashboard__subtitle">Atur bobot komponen nilai, mode input, dan pembulatan untuk rapor siswa.</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 nilai.</p>
                <ul class="mt-1 list-inside list-disc">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
            </div>
        </div>
    @endif

    @include('pkbm.partials.period-selector', [
        'periods' => $periods,
        'period' => $period,
        'activePeriod' => $activePeriod,
    ])

    <div class="grade-settings-layout">
        @if (! $period)
            <section class="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
                <i class="bi bi-exclamation-triangle mr-2" aria-hidden="true"></i>Periode akademik aktif belum diatur. Atur periode terlebih dahulu sebelum menyimpan bobot nilai.
            </section>
        @else
            <section class="sp-card overflow-hidden">
                <div class="sp-card-header flex items-center gap-3">
                    <span class="grid size-9 place-items-center rounded-lg bg-blue-50 text-base text-blue-700"><i class="bi bi-sliders" aria-hidden="true"></i></span>
                    <div>
                        <h2 class="sp-section-title">Pengaturan periode terpilih</h2>
                        <p class="mt-1 text-xs text-slate-500">{{ $period->tahun_pelajaran }} · Semester {{ $period->semester }}</p>
                    </div>
                </div>
                <form method="POST" action="{{ route('pkbm.raport.atur-nilai.save') }}" class="grade-settings-form space-y-2 p-4">
                @csrf
                <div>
                    <div class="grade-weight-heading mb-2 flex flex-wrap items-center justify-between gap-2">
                        <div>
                            <h3 class="grade-weight-title">Bobot penilaian</h3>
                            <p class="mt-1 text-xs text-slate-500">Jumlah keempat komponen harus tepat 100%.</p>
                        </div>
                        <span class="rounded-full bg-blue-50 px-2 py-1 text-xs font-semibold text-blue-700">Total wajib 100%</span>
                    </div>
                    <div class="grade-weight-grid">
                        @foreach ([
                            'persen_tugas' => ['Tugas dan Evaluasi', 'Rata-rata nilai tugas dan evaluasi', 0],
                            'persen_harian' => ['Harian', 'Penilaian harian', 40],
                            'persen_uts' => ['PSTS', 'Penilaian Sumatif Tengah Semester', 30],
                            'persen_uas' => ['PSAS', 'Penilaian Sumatif Akhir Semester', 30],
                        ] as $field => [$label, $description, $default])
                            <label class="grade-weight-card">
                                <span class="grade-weight-card__copy">
                                    <span class="grade-weight-card__label">{{ $label }}</span>
                                    <span class="grade-weight-card__description">{{ $description }}</span>
                                </span>
                                <span class="grade-weight-card__input">
                                    <input class="sp-form-control w-full px-3 py-1.5 text-sm" type="number" name="{{ $field }}" min="0" max="100" step="1" value="{{ old($field, $currentSetting->$field ?? $default) }}" required>
                                    <span class="text-sm font-semibold text-slate-500">%</span>
                                </span>
                            </label>
                        @endforeach
                    </div>
                </div>

                <div class="grade-settings-options grid gap-2 border-t border-slate-100 pt-2 md:grid-cols-[minmax(0,1.3fr)_minmax(12rem,0.7fr)]">
                    <div>
                        <label for="mode_input_nilai" class="sp-form-label">Mode input nilai harian</label>
                        <select id="mode_input_nilai" name="mode_input_nilai" class="sp-form-control w-full px-3 py-2.5 text-sm" required>
                            <option value="1" @selected(old('mode_input_nilai', $currentSetting->mode_input_nilai ?? '1') === '1')>Rata-rata TP · satu nilai harian per siswa</option>
                            <option value="2" @selected(old('mode_input_nilai', $currentSetting->mode_input_nilai ?? '1') === '2')>Detail per TP · nilai untuk setiap tujuan pembelajaran</option>
                        </select>
                        <p class="mt-1.5 text-xs text-slate-500">Mode detail memakai nilai setiap TP untuk menghitung rata-rata harian.</p>
                    </div>
                    <div>
                        <label for="jumlah_desimal" class="sp-form-label">Angka desimal rapor</label>
                        <select id="jumlah_desimal" name="jumlah_desimal" class="sp-form-control w-full px-3 py-2.5 text-sm" required>
                            @foreach (range(0, 4) as $decimalPlaces)
                                <option value="{{ $decimalPlaces }}" @selected((int) old('jumlah_desimal', $currentSetting->jumlah_desimal ?? 0) === $decimalPlaces)>{{ $decimalPlaces }} angka desimal</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="grade-settings-form-actions flex flex-wrap items-center justify-between gap-2 border-t border-slate-100 pt-2">
                    <p class="text-xs text-slate-500"><i class="bi bi-info-circle mr-1" aria-hidden="true"></i>Berlaku untuk rapor periode terpilih.</p>
                    <button class="sp-btn-primary" type="submit"><i class="bi bi-check-lg" aria-hidden="true"></i>{{ $currentSetting ? 'Simpan Perubahan' : 'Simpan Pengaturan' }}</button>
                </div>
                </form>
            </section>
        @endif

        <section class="sp-card grade-settings-history overflow-hidden">
            <div class="sp-card-header flex flex-wrap items-center justify-between gap-3">
                <div>
                    <h2 class="sp-section-title">Riwayat pengaturan nilai</h2>
                    <p class="mt-1 text-xs text-slate-500">{{ $history->count() }} periode tersimpan</p>
                </div>
                <span class="grid size-10 place-items-center rounded-xl bg-slate-100 text-lg text-slate-600"><i class="bi bi-clock-history" aria-hidden="true"></i></span>
            </div>
            <div class="overflow-x-auto">
                <table class="sp-table grade-history-table min-w-[48rem]">
                <colgroup>
                    <col class="grade-history-col--period">
                    <col class="grade-history-col--weight">
                    <col class="grade-history-col--weight">
                    <col class="grade-history-col--weight">
                    <col class="grade-history-col--weight">
                    <col class="grade-history-col--mode">
                    <col class="grade-history-col--decimal">
                    <col class="grade-history-col--actions">
                </colgroup>
                <thead>
                    <tr><th>Periode</th><th class="text-center">Tugas dan Evaluasi</th><th class="text-center">Harian</th><th class="text-center">PSTS</th><th class="text-center">PSAS</th><th>Mode input</th><th class="text-center">Desimal</th><th class="text-center">Status / Aksi</th></tr>
                </thead>
                <tbody>
                    @forelse ($history as $setting)
                        @php($isActive = $activePeriod && $setting->tahun_pelajaran === $activePeriod->tahun_pelajaran && $setting->semester === $activePeriod->semester)
                        <tr @class(['bg-blue-50/60' => $isActive])>
                            <td><strong>{{ $setting->tahun_pelajaran }}</strong><span class="mt-1 block text-xs text-slate-500">Semester {{ $setting->semester }}</span></td>
                            <td class="text-center tabular-nums">{{ $setting->persen_tugas ?? 0 }}%</td>
                            <td class="text-center tabular-nums">{{ $setting->persen_harian }}%</td>
                            <td class="text-center tabular-nums">{{ $setting->persen_uts }}%</td>
                            <td class="text-center tabular-nums">{{ $setting->persen_uas }}%</td>
                            <td>{{ $setting->mode_input_nilai === '2' ? 'Detail per TP' : 'Rata-rata TP' }}</td>
                            <td class="text-center">{{ $setting->jumlah_desimal ?? 0 }}</td>
                            <td class="text-center">
                                @if ($isActive)
                                    <div class="settings-row-actions">
                                        <span class="sp-status-active">Periode aktif</span>
                                    </div>
                                @else
                                    <div class="settings-row-actions">
                                        <button class="settings-icon-action" type="button" data-open-dialog="edit-grade-setting-{{ $setting->id }}" aria-label="Edit pengaturan nilai periode {{ $setting->tahun_pelajaran }} {{ $setting->semester }}" title="Edit pengaturan nilai">
                                            <i class="bi bi-pencil-square" aria-hidden="true"></i>
                                        </button>
                                        <form method="POST" action="{{ route('pkbm.raport.atur-nilai.delete', $setting->id) }}" onsubmit="return confirm('Hapus riwayat pengaturan nilai periode {{ $setting->tahun_pelajaran }} · {{ $setting->semester }}?')">
                                            @csrf @method('DELETE')
                                            <button class="settings-icon-action settings-icon-action--delete" type="submit" aria-label="Hapus pengaturan nilai periode {{ $setting->tahun_pelajaran }} {{ $setting->semester }}" title="Hapus pengaturan nilai">
                                                <i class="bi bi-trash3" aria-hidden="true"></i>
                                            </button>
                                        </form>
                                    </div>
                                @endif
                            </td>
                        </tr>
                        @unless ($isActive)
                            <dialog id="edit-grade-setting-{{ $setting->id }}" class="pkbm-master-dialog pkbm-class-form-dialog w-[min(34rem,calc(100%-2rem))] rounded-2xl p-0 shadow-2xl backdrop:bg-slate-900/50" aria-labelledby="edit-grade-setting-title-{{ $setting->id }}">
                                <form method="POST" action="{{ route('pkbm.raport.atur-nilai.update', $setting->id) }}">
                                    @csrf @method('PUT')
                                    <div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
                                        <div class="flex items-start gap-3">
                                            <span class="pkbm-class-form-dialog__icon" aria-hidden="true"><i class="bi bi-sliders"></i></span>
                                            <div><h2 class="sp-section-title" id="edit-grade-setting-title-{{ $setting->id }}">Edit riwayat nilai</h2><p class="mt-1 text-xs text-slate-500">{{ $setting->tahun_pelajaran }} · {{ $setting->semester }}</p></div>
                                        </div>
                                        <button class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" type="button" data-close-dialog aria-label="Tutup"><i class="bi bi-x-lg" aria-hidden="true"></i></button>
                                    </div>
                                    <div class="space-y-4 p-5">
                                        <div class="grid grid-cols-2 gap-3">
                                            @foreach (['persen_tugas' => 'Tugas dan Evaluasi', 'persen_harian' => 'Harian', 'persen_uts' => 'PSTS', 'persen_uas' => 'PSAS'] as $field => $label)
                                                <div><label class="sp-form-label" for="{{ $field }}-{{ $setting->id }}">{{ $label }} (%)</label><input id="{{ $field }}-{{ $setting->id }}" class="sp-form-control w-full px-3 py-2 text-sm" type="number" name="{{ $field }}" min="0" max="100" step="1" value="{{ $setting->$field ?? 0 }}" required></div>
                                            @endforeach
                                        </div>
                                        <div><label class="sp-form-label" for="mode-{{ $setting->id }}">Mode input nilai</label><select id="mode-{{ $setting->id }}" class="sp-form-control w-full px-3 py-2 text-sm" name="mode_input_nilai" required><option value="1" @selected($setting->mode_input_nilai === '1')>Rata-rata TP</option><option value="2" @selected($setting->mode_input_nilai === '2')>Detail per TP</option></select></div>
                                        <div><label class="sp-form-label" for="decimals-{{ $setting->id }}">Angka desimal</label><select id="decimals-{{ $setting->id }}" class="sp-form-control w-full px-3 py-2 text-sm" name="jumlah_desimal" required>@foreach (range(0, 4) as $decimalPlaces)<option value="{{ $decimalPlaces }}" @selected((int) ($setting->jumlah_desimal ?? 0) === $decimalPlaces)>{{ $decimalPlaces }} angka desimal</option>@endforeach</select></div>
                                        <p class="text-xs text-slate-500">Jumlah bobot keempat komponen harus tepat 100%.</p>
                                    </div>
                                    <div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
                                        <button class="sp-btn-secondary" type="button" data-close-dialog>Batal</button>
                                        <button class="sp-btn-primary" type="submit"><i class="bi bi-check-lg" aria-hidden="true"></i>Simpan Perubahan</button>
                                    </div>
                                </form>
                            </dialog>
                        @endunless
                    @empty
                        <tr><td colspan="8" class="py-10 text-center text-slate-500"><i class="bi bi-inbox mb-2 block text-2xl text-slate-300" aria-hidden="true"></i>Belum ada riwayat pengaturan nilai.</td></tr>
                    @endforelse
                </tbody>
                </table>
            </div>
        </section>
    </div>
</div>
@endsection

@push('scripts')
    <script>
        document.querySelectorAll('[data-open-dialog]').forEach((button) => {
            button.addEventListener('click', () => document.getElementById(button.dataset.openDialog)?.showModal());
        });
        document.querySelectorAll('[data-close-dialog]').forEach((button) => {
            button.addEventListener('click', () => button.closest('dialog')?.close());
        });
    </script>
@endpush