# Implementasi Views Ekstrakurikuler dan Kokurikuler

Tanggal: 2 Agustus 2026

## Overview
Implementasi lengkap views untuk fitur ekstrakurikuler dan kokurikuler, termasuk pengelolaan peserta dan input nilai.

## Views yang Dibuat

### Ekstrakurikuler Views (6 files)

1. **index.blade.php** - Daftar ekstrakurikuler
   - Menampilkan semua data ekstrakurikuler
   - Filter berdasarkan jenis (wajib/pilihan)
   - Search nama ekstrakurikuler
   - Tombol tambah, edit, delete, view detail

2. **create.blade.php** - Form tambah ekstrakurikuler
   - Input nama, jenis, pembina, jadwal (hari, jam mulai, jam selesai)
   - Input tempat, status, deskripsi
   - Validasi form

3. **edit.blade.php** - Form edit ekstrakurikuler
   - Pre-filled dengan data existing
   - Update semua field ekstrakurikuler

4. **show.blade.php** - Detail ekstrakurikuler
   - Info lengkap ekstrakurikuler
   - Daftar peserta dengan nilai dan predikat
   - Tombol kelola peserta dan input nilai

5. **manage-students.blade.php** - Kelola peserta
   - Checkbox selection untuk tambah/hapus peserta
   - Filter berdasarkan kelas
   - Search nama/NIS siswa
   - Tombol pilih semua / batal pilih
   - Real-time counter peserta terpilih

6. **input-nilai.blade.php** - Input nilai ekstrakurikuler
   - Input nilai (0-100) untuk setiap peserta
   - Auto-calculate predikat berdasarkan nilai:
     - A: 85-100 (Sangat Baik)
     - B: 70-84 (Baik)
     - C: 55-69 (Cukup)
     - D: <55 (Kurang)
   - Input keterangan tambahan
   - Batch update semua nilai

### Kokurikuler Views (6 files)

Semua views kokurikuler identik dengan ekstrakurikuler, hanya berbeda pada:
- Route names (simaju.kokurikuler.*)
- Labels dan judul (Kokurikuler)
- Model references ($kokurikuler vs $ekstrakurikuler)

File structure:
```
resources/views/simaju/kokurikuler/
├── index.blade.php
├── create.blade.php
├── edit.blade.php
├── show.blade.php
├── manage-students.blade.php
└── input-nilai.blade.php
```

## Fitur JavaScript

### Manage Students View
```javascript
- Filter berdasarkan kelas (dropdown)
- Search siswa (real-time)
- Checkbox "Pilih Semua" untuk siswa yang visible
- Counter peserta terpilih dinamis
- Tombol "Pilih Semua" dan "Batal Pilih"
```

### Input Nilai View
```javascript
- Auto-calculate predikat saat input nilai
- Validasi nilai 0-100
- Batch update semua nilai sekaligus
```

## Menu Navigation

Menu ditambahkan di sidebar dalam dropdown **Akademik**:

```html
<a href="{{ route('simaju.ekstrakurikuler.index') }}">
    <i class="fas fa-running"></i>
    <span>Ekstrakurikuler</span>
</a>

<a href="{{ route('simaju.kokurikuler.index') }}">
    <i class="fas fa-users-cog"></i>
    <span>Kokurikuler</span>
</a>
```

**Active state detection** pada dropdown Akademik updated untuk include:
- `request()->routeIs('simaju.ekstrakurikuler.*')`
- `request()->routeIs('simaju.kokurikuler.*')`

## Routes yang Digunakan

### Ekstrakurikuler
- `simaju.ekstrakurikuler.index` - GET - List
- `simaju.ekstrakurikuler.create` - GET - Form tambah
- `simaju.ekstrakurikuler.store` - POST - Simpan baru
- `simaju.ekstrakurikuler.show` - GET - Detail
- `simaju.ekstrakurikuler.edit` - GET - Form edit
- `simaju.ekstrakurikuler.update` - PUT - Update
- `simaju.ekstrakurikuler.destroy` - DELETE - Hapus
- `simaju.ekstrakurikuler.manage-students` - GET - Form kelola peserta
- `simaju.ekstrakurikuler.store-students` - POST - Simpan peserta
- `simaju.ekstrakurikuler.input-nilai` - GET - Form input nilai
- `simaju.ekstrakurikuler.update-nilai` - PUT - Update nilai

### Kokurikuler
Sama seperti ekstrakurikuler, hanya ganti prefix route ke `simaju.kokurikuler.*`

## Data yang Dibutuhkan di Controller

### Index
```php
$ekstrakurikulers // Collection of ekstrakurikuler with pembina
$tahunAjaran      // Current tahun ajaran
$semester         // Current semester
```

### Create/Edit
```php
$gurus            // Collection of available pembina
$ekstrakurikuler  // For edit only
```

### Show
```php
$ekstrakurikuler  // With pembina relation
$siswas           // Enrolled students with nilai, predikat
$tahunAjaran      // Current tahun ajaran
$semester         // Current semester
```

### Manage Students
```php
$ekstrakurikuler  // Current ekstrakurikuler
$allSiswas        // All students with kelas
$enrolledSiswaIds // Array of enrolled student IDs
$tahunAjaran      // Current tahun ajaran
$semester         // Current semester
```

### Input Nilai
```php
$ekstrakurikuler  // Current ekstrakurikuler
$siswas           // Enrolled students with current nilai/predikat
$tahunAjaran      // Current tahun ajaran
$semester         // Current semester
```

## Styling & UI

- Menggunakan Tailwind CSS dan Alpine.js
- Font Awesome icons
- Responsive design
- Card-based layout
- Alert messages untuk feedback
- Badge untuk status dan predikat
- Smooth transitions dan animations

## Testing Checklist

- [ ] Menu ekstrakurikuler dan kokurikuler muncul di sidebar
- [ ] Active state correct saat navigate ke halaman ekskul/kokur
- [ ] List view menampilkan data dengan benar
- [ ] Create form bisa submit dan save data
- [ ] Edit form pre-filled dan bisa update
- [ ] Detail view menampilkan info dan peserta
- [ ] Manage students: filter, search, checkbox works
- [ ] Input nilai: auto-calculate predikat works
- [ ] All CRUD operations working
- [ ] JavaScript features working (filter, search, counter)

## Notes

1. Views menggunakan layout `simaju.layouts.main`
2. Semua form menggunakan CSRF protection
3. Icons menggunakan Font Awesome
4. JavaScript menggunakan vanilla JS (tidak perlu library tambahan)
5. Auto-calculate predikat berdasarkan standard nilai:
   - A >= 85
   - B >= 70
   - C >= 55
   - D < 55

## Related Files

- Controllers: `app/Http/Controllers/Simaju/EkstrakurikulerController.php`
- Controllers: `app/Http/Controllers/Simaju/KokurikulerController.php`
- Models: `app/Models/Ekstrakurikuler.php`
- Models: `app/Models/Kokurikuler.php`
- Routes: `routes/web.php`
- Layout: `resources/views/simaju/layouts/main.blade.php`