@extends('layouts.app')

@section('title', 'Konfirmasi Import Dapodik')

@section('content')
<div class="pkbm-master-page mx-auto max-w-5xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div class="min-w-0">
            <p class="pkbm-dashboard__breadcrumb"><span>Data Utama</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Data Siswa<i class="bi bi-chevron-right" aria-hidden="true"></i>Konfirmasi Dapodik</p>
            <h1 class="pkbm-dashboard__title">Konfirmasi import Dapodik</h1>
            <p class="pkbm-dashboard__subtitle">Pastikan nama rombel dan tingkat sudah sesuai sebelum data siswa dan penempatan disimpan.</p>
        </div>
        <form method="POST" action="{{ route('pkbm.siswa.import-dapodik.cancel', $token) }}">
            @csrf
            <button type="submit" class="sp-btn-secondary shrink-0">
                <i class="bi bi-x-lg" aria-hidden="true"></i>Batal
            </button>
        </form>
    </header>

    @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 konfirmasi import.</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 gap-3 sm:grid-cols-3">
        <section class="sp-card p-4">
            <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Periode tujuan</p>
            <p class="mt-1 font-bold text-slate-800">{{ $draft['period']['tahun_pelajaran'] }} · {{ $draft['period']['semester'] }}</p>
        </section>
        <section class="sp-card p-4">
            <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Baris siswa siap diproses</p>
            <p class="mt-1 font-bold text-slate-800">{{ number_format(count($draft['rows']), 0, ',', '.') }} siswa</p>
        </section>
        <section class="sp-card p-4">
            <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Rombel terdeteksi</p>
            <p class="mt-1 font-bold text-slate-800">{{ number_format(count($rooms), 0, ',', '.') }} rombel</p>
        </section>
    </div>

    @if ($draft['duplicate_rows'] > 0)
        <div role="status" class="settings-notice settings-notice--warning">
            <i class="bi bi-info-circle-fill" aria-hidden="true"></i>
            <span>{{ $draft['duplicate_rows'] }} baris siswa duplikat di dalam file akan dilewati.</span>
        </div>
    @endif

    @if (! $draft['has_rombel_column'])
        <div role="status" class="settings-notice settings-notice--warning">
            <i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i>
            <span>Kolom “Rombel Saat Ini” tidak ditemukan. Profil siswa tetap dapat diimpor, tetapi tidak ada penempatan kelas dari file ini.</span>
        </div>
    @endif

    <section class="sp-card overflow-hidden">
        <div class="sp-card-header">
            <h2 class="sp-section-title">Periksa nama rombel dan tingkat</h2>
            <p class="mt-1 text-xs text-slate-500">Kelas dengan nama yang sama dipakai kembali; penempatan siswa dicatat untuk periode aktif. Tingkat yang belum diketahui dapat dibiarkan kosong sehingga profil tetap tersimpan tanpa penempatan kelas.</p>
        </div>
        <form method="POST" action="{{ route('pkbm.siswa.import-dapodik.confirm', $token) }}">
            @csrf
            <div class="overflow-x-auto">
                <table class="sp-table min-w-[42rem]">
                    <thead>
                        <tr>
                            <th scope="col">Nama rombel dari Dapodik</th>
                            <th scope="col">Nama kelas</th>
                            <th scope="col">Tingkat (1–12)</th>
                            <th scope="col" class="text-right">Siswa</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($rooms as $room)
                            @php
                                $defaultGrade = $room['existing_grade'] ?? $room['suggested_grade'];
                            @endphp
                            <tr>
                                <th scope="row" class="font-semibold text-slate-800">{{ $room['name'] }}</th>
                                <td>
                                    <label class="sr-only" for="room-name-{{ $room['key'] }}">Nama kelas untuk {{ $room['name'] }}</label>
                                    <input
                                        id="room-name-{{ $room['key'] }}"
                                        name="rooms[{{ $room['key'] }}][name]"
                                        value="{{ old('rooms.'.$room['key'].'.name', $room['name']) }}"
                                        maxlength="100"
                                        required
                                        class="sp-form-control min-h-9 px-2 py-1.5 text-xs">
                                </td>
                                <td>
                                    <label class="sr-only" for="room-grade-{{ $room['key'] }}">Tingkat untuk {{ $room['name'] }}</label>
                                    <select
                                        id="room-grade-{{ $room['key'] }}"
                                        name="rooms[{{ $room['key'] }}][grade]"
                                        class="sp-form-control min-h-9 px-2 py-1.5 text-xs">
                                        <option value="">Belum diketahui — lewati penempatan</option>
                                        @for ($grade = 1; $grade <= 12; $grade++)
                                            <option value="{{ $grade }}" @selected((string) old('rooms.'.$room['key'].'.grade', $defaultGrade) === (string) $grade)>
                                                Tingkat {{ $grade }}
                                            </option>
                                        @endfor
                                    </select>
                                    @if ($room['existing_grade'] !== null)
                                        <small class="mt-1 block text-xs text-slate-500">Kelas sudah ada · tingkat {{ $room['existing_grade'] }}{{ $room['existing_status'] === 'Nonaktif' ? ' · akan diaktifkan kembali' : '' }}</small>
                                    @elseif ($room['suggested_grade'] === null)
                                        <small class="mt-1 block text-xs text-amber-700">Tingkat tidak terbaca dari nama rombel.</small>
                                    @endif
                                </td>
                                <td class="text-right font-semibold text-slate-700">{{ number_format($room['student_count'], 0, ',', '.') }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="py-8 text-center text-sm text-slate-500">Tidak ada nama rombel pada baris siswa di file ini.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="flex flex-col gap-3 border-t border-slate-100 p-4 sm:flex-row sm:items-center sm:justify-between">
                <label class="flex items-start gap-2 text-sm text-slate-600">
                    <input type="checkbox" name="confirm_import" value="1" required class="mt-1">
                    <span>Saya sudah memeriksa nama rombel dan tingkat, lalu menyetujui import untuk periode ini.</span>
                </label>
                <button type="submit" class="sp-btn-primary shrink-0">
                    <i class="bi bi-check2-circle" aria-hidden="true"></i>Konfirmasi dan import
                </button>
            </div>
        </form>
    </section>

    <section class="sp-card overflow-hidden">
        <div class="sp-card-header">
            <h2 class="sp-section-title">Contoh data siswa dari file</h2>
            <p class="mt-1 text-xs text-slate-500">Data siswa yang sudah ada dicocokkan melalui NISN, NIK, lalu nama siswa dan nama ibu; profil hanya diperbarui dengan nilai yang tersedia.</p>
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-[36rem]">
                <thead><tr><th scope="col">Nama siswa</th><th scope="col">NISN</th><th scope="col">Nama ibu</th><th scope="col">Rombel</th></tr></thead>
                <tbody>
                    @forelse (array_slice($draft['rows'], 0, 10) as $row)
                        <tr>
                            <td class="font-semibold text-slate-800">{{ $row['values']['nama_siswa'] }}</td>
                            <td>{{ $row['values']['nisn'] ?: '-' }}</td>
                            <td>{{ $row['values']['nama_ibu'] ?: '-' }}</td>
                            <td>{{ $row['rombel'] ?: '-' }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="4" class="py-8 text-center text-sm text-slate-500">Tidak ada baris siswa yang dapat diproses.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if (count($draft['rows']) > 10)
            <p class="border-t border-slate-100 px-4 py-3 text-xs text-slate-500">Menampilkan 10 dari {{ number_format(count($draft['rows']), 0, ',', '.') }} siswa.</p>
        @endif
    </section>
</div>
@endsection