Files
database-kesiswaan/resources/views/classes/index.blade.php
T

252 lines
18 KiB
PHP

<x-master-page
title="Kelas"
description="Kelola data kelas berdasarkan tahun angkatan dan program keahlian."
action-label="Tambah Kelas"
:action-url="route('classes.create')"
>
<x-master-card title="Import Data Kelas" subtitle="Upload Excel/CSV untuk menambah atau memperbarui data kelas secara massal.">
<form method="POST" action="{{ route('classes.import.preview') }}" enctype="multipart/form-data" class="space-y-5">
@csrf
<div>
<label for="import_file" class="mb-2 block text-sm font-medium text-slate-700">File Excel / CSV</label>
<input id="import_file" name="import_file" type="file" accept=".xlsx,.csv,.txt" class="block w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 file:mr-4 file:rounded-xl file:border-0 file:bg-indigo-50 file:px-4 file:py-2 file:font-semibold file:text-indigo-700 hover:file:bg-indigo-100">
<p class="mt-2 text-xs text-slate-500">Gunakan template agar format kolom sesuai. Import ini akan update data lama jika nama kelas pada tahun ajaran yang sama sudah ada.</p>
</div>
<div class="flex flex-wrap items-center gap-3">
<button type="submit" class="inline-flex items-center rounded-2xl bg-indigo-600 px-5 py-3 text-sm font-semibold text-white shadow-lg shadow-indigo-200 transition hover:bg-indigo-700">Preview Import</button>
<a href="{{ route('classes.import.template') }}" class="inline-flex items-center rounded-2xl border border-emerald-200 bg-emerald-50 px-5 py-3 text-sm font-semibold text-emerald-700 transition hover:bg-emerald-100">Download Template</a>
</div>
</form>
@if (!empty($importPreview))
<div class="mt-6 rounded-3xl border border-slate-200 bg-white p-5">
<div class="mb-5 grid grid-cols-1 gap-4 md:grid-cols-4">
<div class="rounded-3xl border border-slate-200 bg-slate-50 px-5 py-4">
<div class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Total Baris</div>
<div class="mt-2 text-3xl font-bold text-slate-800">{{ $importPreview['summary']['total_rows'] }}</div>
</div>
<div class="rounded-3xl border border-emerald-200 bg-emerald-50 px-5 py-4">
<div class="text-xs font-semibold uppercase tracking-[0.18em] text-emerald-600">Valid</div>
<div class="mt-2 text-3xl font-bold text-emerald-700">{{ $importPreview['summary']['valid_rows'] }}</div>
</div>
<div class="rounded-3xl border border-sky-200 bg-sky-50 px-5 py-4">
<div class="text-xs font-semibold uppercase tracking-[0.18em] text-sky-600">Insert Baru</div>
<div class="mt-2 text-3xl font-bold text-sky-700">{{ $importPreview['summary']['insert_rows'] }}</div>
</div>
<div class="rounded-3xl border border-amber-200 bg-amber-50 px-5 py-4">
<div class="text-xs font-semibold uppercase tracking-[0.18em] text-amber-600">Update Data</div>
<div class="mt-2 text-3xl font-bold text-amber-700">{{ $importPreview['summary']['update_rows'] }}</div>
</div>
</div>
@if (!empty($importPreview['errors']))
<div class="mb-5 rounded-2xl border border-rose-200 bg-rose-50 px-5 py-4 text-sm text-rose-700">
<div class="font-semibold">Ada baris yang belum valid.</div>
<ul class="mt-2 list-disc space-y-1 pl-5">
@foreach (array_slice($importPreview['errors'], 0, 10) as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<div class="overflow-x-auto rounded-3xl border border-slate-200">
<table class="min-w-full divide-y divide-slate-200 text-sm">
<thead class="bg-slate-50">
<tr>
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Baris</th>
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Akademik</th>
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Nama Kelas</th>
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Detail</th>
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Aksi</th>
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Validasi</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100 bg-white">
@foreach ($importPreview['rows'] as $row)
<tr class="align-top {{ $row['is_valid'] ? '' : 'bg-rose-50/50' }}">
<td class="px-4 py-4 font-semibold text-slate-700">{{ $row['row_number'] }}</td>
<td class="px-4 py-4 text-slate-600">
<div>Tahun: {{ $importReferenceData['academicYears'][$row['data']['academic_year_id']] ?? '-' }}</div>
<div>Jurusan: {{ $importReferenceData['departments'][$row['data']['department_id']] ?? '-' }}</div>
</td>
<td class="px-4 py-4 text-slate-700">
<div class="font-medium">{{ $row['data']['name'] ?: '-' }}</div>
<div class="text-xs text-slate-400">Tingkat: {{ $row['data']['level'] ?: '-' }}</div>
</td>
<td class="px-4 py-4 text-slate-600">
<div>Wali Kelas: {{ $row['data']['homeroom_teacher'] ?: '-' }}</div>
<div>Kapasitas: {{ $row['data']['capacity'] ?: '-' }}</div>
<div>Status: {{ ($row['data']['is_active'] ?? false) ? 'Aktif' : 'Nonaktif' }}</div>
</td>
<td class="px-4 py-4">
<span class="rounded-full px-3 py-1 text-xs font-semibold {{ $row['action'] === 'update' ? 'bg-amber-100 text-amber-700' : 'bg-sky-100 text-sky-700' }}">{{ $row['action'] === 'update' ? 'Update' : 'Insert' }}</span>
</td>
<td class="px-4 py-4 text-sm">
@if ($row['is_valid'])
<span class="rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-700">Valid</span>
@else
<div class="space-y-1 text-rose-700">
<div class="inline-flex rounded-full bg-rose-100 px-3 py-1 text-xs font-semibold">Perlu perbaikan</div>
<ul class="list-disc pl-4 text-xs">
@foreach ($row['errors'] as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@if ($importPreview['summary']['valid_rows'] > 0)
<form method="POST" action="{{ route('classes.import') }}" class="mt-6 flex flex-wrap items-center gap-3">
@csrf
<input type="hidden" name="preview_token" value="{{ $importPreview['token'] }}">
<button type="submit" class="inline-flex items-center rounded-2xl bg-emerald-600 px-5 py-3 text-sm font-semibold text-white shadow-lg shadow-emerald-200 transition hover:bg-emerald-700">Konfirmasi Import ke Database</button>
<span class="text-sm text-slate-500">Hanya baris valid yang akan diproses.</span>
</form>
@endif
</div>
@endif
</x-master-card>
<x-master-card title="Generate Kelas Tahun Ajaran Baru" subtitle="Salin kelas dari tahun ajaran sumber ke tahun ajaran target. Cocok untuk menyiapkan kelas tahun ajaran baru sebelum promosi siswa.">
<form method="POST" action="{{ route('classes.generate') }}" class="grid grid-cols-1 gap-4 xl:grid-cols-4 xl:items-end">
@csrf
<div>
<label for="source_academic_year_id" class="mb-2 block text-sm font-medium text-slate-700">Tahun Ajaran Sumber</label>
<select id="source_academic_year_id" name="source_academic_year_id" class="w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 focus:border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-100">
<option value="">Pilih tahun sumber</option>
@foreach ($academicYears as $academicYear)
<option value="{{ $academicYear->id }}">{{ $academicYear->name }}</option>
@endforeach
</select>
</div>
<div>
<label for="target_academic_year_id" class="mb-2 block text-sm font-medium text-slate-700">Tahun Ajaran Target</label>
<select id="target_academic_year_id" name="target_academic_year_id" class="w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 focus:border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-100">
<option value="">Pilih tahun target</option>
@foreach ($academicYears as $academicYear)
<option value="{{ $academicYear->id }}">{{ $academicYear->name }}</option>
@endforeach
</select>
</div>
<div>
<label for="generation_mode" class="mb-2 block text-sm font-medium text-slate-700">Mode Generate</label>
<select id="generation_mode" name="generation_mode" class="w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 focus:border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-100">
<option value="promote_level">Naikkan level kelas (X→XI, XI→XII)</option>
<option value="same_level">Salin level yang sama</option>
</select>
</div>
<div>
<button type="submit" class="inline-flex w-full items-center justify-center rounded-2xl bg-indigo-600 px-5 py-3 text-sm font-semibold text-white shadow-lg shadow-indigo-200 transition hover:bg-indigo-700">
Generate Kelas
</button>
</div>
</form>
<div class="mt-4 rounded-2xl border border-sky-200 bg-sky-50 px-4 py-3 text-sm text-sky-700">
Tips: untuk persiapan promosi siswa, biasanya pilih mode <span class="font-semibold">Naikkan level kelas</span> agar kelas X pada tahun lama menjadi XI di tahun baru, dan XI menjadi XII.
</div>
</x-master-card>
<x-master-card title="Filter Data" subtitle="Cari berdasarkan nama kelas, tingkat, atau wali kelas.">
<form method="GET" action="{{ route('classes.index') }}" class="flex flex-col gap-4 md:flex-row md:items-end">
<div class="md:flex-1">
<x-form-input name="search" label="Pencarian" :value="$search" placeholder="Cari kelas..." />
</div>
<div class="flex items-end gap-3">
<button type="submit" class="rounded-2xl bg-slate-900 px-5 py-3 text-sm font-semibold text-white transition hover:bg-slate-800">Cari</button>
<a href="{{ route('classes.index') }}" class="rounded-2xl border border-slate-200 px-5 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-50">Reset</a>
</div>
</form>
</x-master-card>
<form method="POST" action="{{ route('classes.bulk-destroy') }}" class="space-y-4" id="bulk-delete-classes-form">
@csrf
@method('DELETE')
<div class="flex flex-col gap-3 rounded-2xl border border-slate-200 bg-white px-5 py-4 shadow-sm lg:flex-row lg:items-center lg:justify-between">
<div class="text-sm text-slate-600">
<div><span class="font-semibold text-slate-800">Total data:</span> {{ $classes->total() }} kelas</div>
<div class="text-xs text-slate-400">Halaman {{ $classes->currentPage() }} dari {{ $classes->lastPage() }}</div>
</div>
<div class="flex flex-wrap items-center gap-3">
<label class="inline-flex items-center gap-2 text-sm text-slate-600">
<input type="checkbox" id="select-all-classes" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
<span>Pilih semua di halaman ini</span>
</label>
<button type="submit" class="inline-flex items-center rounded-2xl border border-rose-200 bg-rose-50 px-5 py-3 text-sm font-semibold text-rose-700 transition hover:bg-rose-100 opacity-50 cursor-not-allowed" id="bulk-delete-classes-button" disabled>
Hapus Masal Kelas
</button>
</div>
</div>
<x-data-table :headers="['Pilih', 'Nama Kelas', 'Tingkat', 'Tahun Angkatan', 'Program Keahlian', 'Dipakai', 'Histori', 'Status', 'Aksi']">
@forelse ($classes as $class)
<tr>
<td class="px-6 py-4 align-top">
<input type="checkbox" name="class_ids[]" value="{{ $class->id }}" class="class-row-checkbox rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" {{ ($class->students_count > 0 || $class->academic_histories_count > 0) ? 'disabled' : '' }}>
</td>
<td class="px-6 py-4">
<div class="font-semibold text-slate-800">{{ $class->name }}</div>
<div class="text-xs text-slate-400">Wali Kelas: {{ $class->homeroom_teacher ?: '-' }}</div>
</td>
<td class="px-6 py-4 text-sm text-slate-600">{{ $class->level }}</td>
<td class="px-6 py-4 text-sm text-slate-600">{{ $class->academicYear?->name }}</td>
<td class="px-6 py-4 text-sm text-slate-600">{{ $class->department?->name }}</td>
<td class="px-6 py-4">
<span class="rounded-full bg-indigo-100 px-3 py-1 text-xs font-semibold text-indigo-700">Siswa: {{ $class->students_count }}</span>
</td>
<td class="px-6 py-4">
<span class="rounded-full bg-sky-100 px-3 py-1 text-xs font-semibold text-sky-700">Histori: {{ $class->academic_histories_count }}</span>
</td>
<td class="px-6 py-4">
@if ($class->is_active)
<span class="rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-700">Aktif</span>
@else
<span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-600">Nonaktif</span>
@endif
</td>
<td class="px-6 py-4">
<div class="flex flex-wrap items-center gap-2">
<a href="{{ route('classes.edit', $class) }}" class="rounded-xl border border-slate-200 px-3 py-2 text-xs font-semibold text-slate-700 transition hover:bg-slate-50">Edit</a>
@if ($class->students_count === 0 && $class->academic_histories_count === 0)
<form action="{{ route('classes.destroy', $class) }}" method="POST" class="delete-form" data-entity="kelas {{ $class->name }}">
@csrf
@method('DELETE')
<button type="submit" class="rounded-xl border border-rose-200 px-3 py-2 text-xs font-semibold text-rose-600 transition hover:bg-rose-50">Hapus</button>
</form>
@else
<button type="button" disabled class="cursor-not-allowed rounded-xl border border-slate-200 bg-slate-100 px-3 py-2 text-xs font-semibold text-slate-400" title="Tidak bisa dihapus karena masih dipakai data siswa atau histori akademik">
Dipakai
</button>
@endif
</div>
</td>
</tr>
@empty
<tr>
<td colspan="9" class="px-6 py-10 text-center text-sm text-slate-500">Belum ada data kelas.</td>
</tr>
@endforelse
</x-data-table>
<div class="flex flex-col gap-3 rounded-2xl border border-slate-200 bg-white px-5 py-4 shadow-sm lg:flex-row lg:items-center lg:justify-between">
<div class="text-sm text-slate-600">
Menampilkan <span class="font-semibold text-slate-800">{{ $classes->firstItem() ?? 0 }}</span> sampai <span class="font-semibold text-slate-800">{{ $classes->lastItem() ?? 0 }}</span> dari <span class="font-semibold text-slate-800">{{ $classes->total() }}</span> kelas.
</div>
<div>
{{ $classes->links() }}
</div>
</div>
</form>
</x-master-page>