@extends('layouts.app')

@section('title', $config['title'])

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl 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 Master<i class="bi bi-chevron-right" aria-hidden="true"></i>{{ $config['title'] }}</p>
            <h1 class="pkbm-dashboard__title">{{ $config['title'] }}</h1>
            <p class="pkbm-dashboard__subtitle">{{ $config['description'] }}</p>
        </div>
        <div class="flex flex-wrap gap-2">
            @if ($type === 'guru')
                <a href="{{ route('pkbm.guru.template') }}" class="sp-btn-secondary shrink-0">
                    <i class="bi bi-download" aria-hidden="true"></i>Template Excel
                </a>
                <button type="button" class="sp-btn-secondary shrink-0" data-open-dialog="teacher-import-dialog">
                    <i class="bi bi-upload" aria-hidden="true"></i>Import Excel
                </button>
            @endif
            @if ($type === 'mapel')
                <button type="button" class="sp-btn-secondary shrink-0" data-open-dialog="extracurricular-subject-dialog">
                    <i class="bi bi-trophy" aria-hidden="true"></i>Tambah Mapel Ekskul
                </button>
            @endif
            <a href="{{ route('pkbm.master.create', $type) }}" class="sp-btn-primary shrink-0">
                <i class="bi bi-plus-lg" aria-hidden="true"></i>{{ $type === 'guru' ? 'Tambah Guru' : ($type === 'mapel' ? 'Tambah Mapel' : 'Tambah data') }}
            </a>
        </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

    <section class="sp-card overflow-hidden">
        <div class="sp-card-header settings-history-card__header flex flex-wrap items-center justify-between gap-3">
            <div>
                <h2 class="sp-section-title">Daftar {{ strtolower($config['title']) }}</h2>
                <p class="mt-1 text-xs text-slate-500">{{ number_format($records->total(), 0, ',', '.') }} data terdaftar</p>
            </div>
            <form method="GET" action="{{ route('pkbm.master.index', $type) }}" class="flex w-full gap-2 sm:w-auto">
                <label for="master-search" class="sr-only">Cari {{ strtolower($config['title']) }}</label>
                <input id="master-search" type="search" name="q" value="{{ request('q') }}" placeholder="Cari data..."
                       class="sp-form-control min-w-0 flex-1 px-3 py-2 text-sm sm:w-64">
                <button type="submit" class="sp-btn-secondary"><i class="bi bi-search" aria-hidden="true"></i><span class="sr-only sm:not-sr-only">Cari</span></button>
            </form>
        </div>
        <div class="overflow-x-auto">
            <table @class(['sp-table min-w-full', 'sp-table--mapel' => $type === 'mapel'])>
                <thead>
                    <tr>
                        <th scope="col" class="w-12">No</th>
                        @foreach ($config['columns'] as $column)
                            <th scope="col">{{ $column['label'] }}</th>
                        @endforeach
                        <th scope="col" class="text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($records as $record)
                        <tr>
                            <td class="text-slate-500">{{ $records->firstItem() + $loop->index }}</td>
                            @foreach ($config['columns'] as $column)
                                @if ($type === 'guru' && $column['name'] === 'foto')
                                    <td>
                                        @if ($record->foto)
                                            <img src="{{ route('pkbm.guru.photo', $record->id) }}" alt="Foto {{ $record->nama }}" loading="lazy" class="size-11 rounded-lg border border-slate-200 object-cover">
                                        @else
                                            <span class="grid size-11 place-items-center rounded-lg border border-slate-200 bg-slate-50 text-xl text-slate-400" aria-label="Foto belum tersedia"><i class="bi bi-person" aria-hidden="true"></i></span>
                                        @endif
                                    </td>
                                @elseif ($type === 'guru' && $column['name'] === 'nama')
                                    <td>
                                        <span class="block font-bold text-slate-900">{{ $record->nama ?: '-' }}</span>
                                        <span class="mt-0.5 block text-xs text-slate-500">SK: {{ $record->sk ?: '-' }}</span>
                                        <span class="block text-[11px] text-slate-500">NUPTK: {{ $record->nuptk ?: '-' }}</span>
                                    </td>
                                @elseif ($type === 'guru' && $column['name'] === 'tanggal_lahir')
                                    <td class="text-xs">
                                        <span class="block">{{ $record->tempat_lahir ?: '-' }}{{ $record->tanggal_lahir && $record->tanggal_lahir !== '0000-00-00' ? ', '.\Illuminate\Support\Carbon::parse($record->tanggal_lahir)->format('d/m/Y') : '' }}</span>
                                        <span @class([
                                            'mt-1 inline-flex rounded-full border px-2 py-0.5 text-[11px] font-medium',
                                            'border-sky-100 bg-sky-50 text-sky-700' => $record->jenis_kelamin === 'L',
                                            'border-violet-100 bg-violet-50 text-violet-700' => $record->jenis_kelamin === 'P',
                                            'border-slate-200 bg-slate-50 text-slate-600' => ! in_array($record->jenis_kelamin, ['L', 'P'], true),
                                        ])>{{ $record->jenis_kelamin === 'L' ? 'Laki-laki' : ($record->jenis_kelamin === 'P' ? 'Perempuan' : '-') }}</span>
                                    </td>
                                @elseif ($type === 'guru' && $column['name'] === 'no_hp')
                                    <td>
                                        <span class="block whitespace-nowrap"><i class="bi bi-whatsapp mr-1 text-emerald-600" aria-hidden="true"></i>{{ $record->no_hp ?: '-' }}</span>
                                        <span class="mt-1 block max-w-40 truncate text-xs text-slate-500" title="{{ $record->alamat }}">{{ $record->alamat ?: '-' }}</span>
                                    </td>
                                @elseif ($type === 'guru' && $column['name'] === 'status')
                                    <td>
                                        <span @class([
                                            'inline-flex rounded-full px-2.5 py-1 text-[11px] font-semibold',
                                            'bg-emerald-50 text-emerald-700' => $record->status === 'Induk',
                                            'bg-sky-50 text-sky-700' => $record->status !== 'Induk',
                                        ])>{{ $record->status ?: '-' }}</span>
                                        <span class="mt-1 block text-xs text-slate-500">Mulai: {{ $record->tahun_mulai_kerja ?: '-' }}</span>
                                    </td>
                                @else
                                    <td>{{ $record->{$column['name']} ?: '-' }}</td>
                                @endif
                            @endforeach
                            <td class="text-right">
                                <div class="inline-flex items-center gap-1">
                                    @if ($type === 'guru')
                                        <a href="{{ route('pkbm.guru.certificate', $record->id) }}" target="_blank" rel="noopener" class="settings-icon-action" aria-label="Cetak keterangan kerja {{ $record->nama }}" title="Cetak keterangan kerja">
                                            <i class="bi bi-printer" aria-hidden="true"></i>
                                        </a>
                                    @endif
                                    <a href="{{ route('pkbm.master.edit', [$type, $record->id]) }}" class="settings-icon-action" aria-label="Edit data" title="Edit data">
                                        <i class="bi bi-pencil-square" aria-hidden="true"></i>
                                    </a>
                                    @if ($type === 'guru')
                                        <form method="POST" action="{{ route('pkbm.guru.destroy', $record->id) }}" onsubmit="return confirm('Hapus data guru ini?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="settings-icon-action settings-icon-action--delete" aria-label="Hapus data {{ $record->nama }}" title="Hapus data">
                                                <i class="bi bi-trash" aria-hidden="true"></i>
                                            </button>
                                        </form>
                                    @elseif ($type === 'mapel')
                                        <form method="POST" action="{{ route('pkbm.mapel.destroy', $record->id) }}" onsubmit="return confirm('Hapus mata pelajaran {{ $record->nama_mapel }}?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="settings-icon-action settings-icon-action--delete" aria-label="Hapus mata pelajaran {{ $record->nama_mapel }}" title="Hapus mata pelajaran">
                                                <i class="bi bi-trash" aria-hidden="true"></i>
                                            </button>
                                        </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="{{ count($config['columns']) + 2 }}" class="py-10 text-center text-sm text-slate-500">
                                {{ request('q') ? 'Data tidak ditemukan.' : 'Belum ada data. Tambahkan data pertama Anda.' }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($records->hasPages())
            <div class="flex flex-wrap items-center justify-between gap-3 border-t border-slate-100 p-4">
                <p class="text-xs text-slate-500">
                    Menampilkan {{ number_format($records->firstItem(), 0, ',', '.') }}–{{ number_format($records->lastItem(), 0, ',', '.') }}
                    dari {{ number_format($records->total(), 0, ',', '.') }} data
                </p>
                {{ $records->links() }}
            </div>
        @endif
    </section>
    @if ($type === 'mapel')
        <section class="sp-card overflow-hidden">
            <div class="sp-card-header flex flex-wrap items-center justify-between gap-3">
                <div>
                    <h2 class="sp-section-title">Mata pelajaran ekstrakurikuler</h2>
                    <p class="mt-1 text-xs text-slate-500">{{ $extracurriculars->count() }} ekstrakurikuler terdaftar untuk penilaian rapor.</p>
                </div>
                <span class="grid size-10 place-items-center rounded-xl bg-amber-50 text-lg text-amber-600"><i class="bi bi-trophy" aria-hidden="true"></i></span>
            </div>
            <div class="overflow-x-auto">
                <table class="sp-table min-w-full">
                    <thead>
                        <tr><th class="w-12">No</th><th>Nama ekstrakurikuler</th><th>Keterangan</th><th class="text-center">Status</th></tr>
                    </thead>
                    <tbody>
                        @forelse ($extracurriculars as $activity)
                            <tr>
                                <td class="text-slate-500">{{ $loop->iteration }}</td>
                                <td class="font-semibold text-slate-800">{{ $activity->nama_ekskul }}</td>
                                <td class="max-w-xl whitespace-normal">{{ $activity->keterangan ?: '—' }}</td>
                                <td class="text-center">
                                    <span @class([
                                        'inline-flex rounded-full px-2.5 py-1 text-[11px] font-semibold',
                                        'bg-emerald-50 text-emerald-700' => (int) $activity->status === 1,
                                        'bg-slate-100 text-slate-600' => (int) $activity->status !== 1,
                                    ])>{{ (int) $activity->status === 1 ? 'Aktif' : 'Nonaktif' }}</span>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="py-8 text-center text-sm text-slate-500">Belum ada mapel ekstrakurikuler. Tambahkan ekskul yang tersedia di PKBM.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </section>
    @endif
</div>
@if ($type === 'mapel')
    <dialog id="extracurricular-subject-dialog" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="extracurricular-subject-title">
        <form action="{{ route('pkbm.master.mapel-ekskul.store') }}" method="POST">
            @csrf
            <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-trophy"></i></span>
                    <div>
                        <h2 id="extracurricular-subject-title" class="sp-section-title">Tambah mapel ekstrakurikuler</h2>
                        <p class="mt-1 text-xs leading-5 text-slate-500">Digunakan untuk penilaian rapor dan terpisah dari mata pelajaran reguler.</p>
                    </div>
                </div>
                <button type="button" data-close-dialog="extracurricular-subject-dialog" class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" aria-label="Tutup">
                    <i class="bi bi-x-lg" aria-hidden="true"></i>
                </button>
            </div>
            <div class="pkbm-class-form-dialog__body space-y-4 p-5">
                <div>
                    <label class="sp-form-label" for="nama-ekskul">Nama ekstrakurikuler</label>
                    <input id="nama-ekskul" name="nama_ekskul" value="{{ old('nama_ekskul') }}" required maxlength="100" class="sp-form-control w-full px-3 py-2.5 text-sm" placeholder="Contoh: Pramuka">
                    @error('nama_ekskul')<p class="mt-1 text-xs text-rose-700">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="sp-form-label" for="keterangan-ekskul">Keterangan <span class="font-normal text-slate-400">(opsional)</span></label>
                    <textarea id="keterangan-ekskul" name="keterangan" rows="3" maxlength="2000" class="sp-form-control w-full px-3 py-2.5 text-sm" placeholder="Keterangan singkat kegiatan ekstrakurikuler">{{ old('keterangan') }}</textarea>
                    @error('keterangan')<p class="mt-1 text-xs text-rose-700">{{ $message }}</p>@enderror
                </div>
            </div>
            <div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
                <button type="button" data-close-dialog="extracurricular-subject-dialog" class="sp-btn-secondary">Batal</button>
                <button type="submit" class="sp-btn-primary"><i class="bi bi-check-lg" aria-hidden="true"></i>Simpan Ekstrakurikuler</button>
            </div>
        </form>
    </dialog>
@endif
@if ($type === 'guru')
    <dialog id="teacher-import-dialog" class="pkbm-master-dialog pkbm-class-form-dialog" aria-labelledby="teacher-import-title">
        <form action="{{ route('pkbm.guru.import') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <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-person-lines-fill"></i></span>
                    <div>
                        <h2 id="teacher-import-title" class="sp-section-title">Import data guru</h2>
                        <p class="mt-1 text-xs leading-5 text-slate-500">Pilih file .xlsx sesuai template. NUPTK yang sudah terdaftar akan dilewati.</p>
                    </div>
                </div>
                <button type="button" data-close-dialog="teacher-import-dialog" class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" aria-label="Tutup">
                    <i class="bi bi-x-lg" aria-hidden="true"></i>
                </button>
            </div>
            <div class="pkbm-class-form-dialog__body p-5">
                <label for="teacher-import-file" class="sp-form-label">File Excel (.xlsx)</label>
                <input id="teacher-import-file" name="file_excel" type="file" accept=".xlsx" required class="sp-form-control w-full px-3 py-2.5 text-sm">
                @error('file_excel')<p class="mt-1 text-xs text-rose-700">{{ $message }}</p>@enderror
            </div>
            <div class="pkbm-class-form-dialog__footer flex flex-wrap items-center justify-between gap-2 border-t border-slate-100 p-5">
                <a href="{{ route('pkbm.guru.template') }}" class="text-sm font-semibold text-blue-700 hover:text-blue-900"><i class="bi bi-download mr-1" aria-hidden="true"></i>Download template guru</a>
                <div class="flex gap-2">
                    <button type="button" data-close-dialog="teacher-import-dialog" class="sp-btn-secondary">Batal</button>
                    <button type="submit" class="sp-btn-primary"><i class="bi bi-upload" aria-hidden="true"></i>Mulai import</button>
                </div>
            </div>
        </form>
    </dialog>
@endif
@if (in_array($type, ['guru', 'mapel'], true))
    @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', () => document.getElementById(button.dataset.closeDialog)?.close());
            });
            document.querySelectorAll('dialog').forEach(dialog => {
                dialog.addEventListener('click', event => {
                    if (event.target === dialog) dialog.close();
                });
            });
            @if ($type === 'mapel' && old('nama_ekskul'))
                document.getElementById('extracurricular-subject-dialog')?.showModal();
            @endif
        </script>
    @endpush
@endif
@endsection