@extends('admin.layout')

@section('title', '')

@section('content')
    <div class="card">
        <div class="card-header" style="background-color:#6f42c1; color:#fff;">
            <div>
                <h5 class="mb-0"><i class="bi bi-award me-2"></i>Penilaian Kokurikuler</h5>
                <small class="text-warning">Kelola penilaian profil lulusan peserta didik</small>
            </div>
        </div>
        <div class="card-body">
            @php
                $activePeriode = \App\Models\Periode::where('status', \App\Models\Periode::STATUS_AKTIF)->first();
                $tahunPel = $activePeriode->tahun_pelajaran ?? '-';
                $semester = $activePeriode->semester ?? '-';
            @endphp
            <div class="d-flex justify-content-between align-items-start mt-2">
                <div>
                    <h6 class="mb-0">Daftar Penilaian Kualitatif Profil Lulusan Peserta Didik</h6>
                    <div class="small text-danger">Tahun Pelajaran: <strong>{{ $tahunPel }}</strong> &nbsp;|&nbsp; Semester: <strong>{{ $semester }}</strong></div>
                </div>
                <div>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#modalBeriNilai">
                            <i class="bi bi-plus-lg me-1"></i> Beri Nilai
                        </button>
                        <a href="@if(request()->is('guru/*')){{ url('guru/penilaian/kokurikuler/hasil') }}@else{{ url('admin/penilaian/kokurikuler/hasil') }}@endif" class="btn btn-success btn-sm" title="Hasil">
                            <i class="bi bi-list-check me-1"></i> Hasil
                        </a>
                    </div>
                </div>
            </div>

            {{-- Filters: Kelas & Peserta Didik for kokurikuler --}}
            <div class="row mt-3">
                <div class="col-md-4">
                    <label class="form-label">Kelas</label>
                    <select name="filter_kelas_kok" class="form-select">
                        <option value="">-- Pilih Kelas --</option>
                        @foreach($kelasList ?? [] as $k)
                            <option value="{{ $k->id }}">{{ $k->nama ?? $k->nama_kelas ?? $k->nama }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Peserta Didik</label>
                    <select name="filter_peserta_kok" class="form-select" disabled>
                        <option value="">-- Pilih Kelas terlebih dahulu --</option>
                        @foreach($pesertaDidikList ?? [] as $p)
                            <option value="{{ $p->id }}">{{ $p->nama }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-12">
                    <div class="alert alert-info mb-3" id="kokInfo">
                        Silakan pilih <strong>Kelas</strong> dan <strong>Peserta Didik</strong> untuk menampilkan data.
                    </div>
                </div>
            </div>

            {{-- Tabel Penilaian Kokurikuler --}}
            <div class="table-responsive mt-3">
                <div id="kokTableWrap">
                <table class="table table-striped table-bordered" style="table-layout:fixed; width:100%;">
                    <colgroup>
                        <col style="width:25%;"> <!-- Nama Peserta Didik -->
                        <col style="width:10%;"> <!-- Kelas -->
                        <col style="width:15%;"> <!-- Demensi -->
                        <col style="width:15%;"> <!-- Sub Demensi -->
                        <col style="width:10%;"> <!-- Nilai -->
                            <col style="width:25%"> <!-- Deskripsi -->
                            <col style="width:10%"> <!-- Aksi -->
                    </colgroup>
                    <thead class="table-light">
                        <tr>
                            <th>Nama Peserta Didik</th>
                            <th>Kelas</th>
                            <th>Demensi</th>
                            <th>Sub Demensi</th>
                            <th>Nilai</th>
                            <th>Deskripsi</th>
                                <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if(isset($penilaianKokurikuler) && $penilaianKokurikuler->count())
                            @foreach($penilaianKokurikuler as $item)
                                <tr data-kelas="{{ data_get($item, 'kelas_id', '') }}" data-peserta="{{ data_get($item, 'peserta_didik_id', '') }}">
                                    <td>{{ data_get($item, 'peserta_didik.nama') ?? data_get($item, 'nama') ?? '-' }}</td>
                                    <td>{{ data_get($item, 'kelas.nama_kelas') ?? data_get($item, 'kelas') ?? '-' }}</td>
                                    <td>{{ data_get($item, 'demensi') ?? data_get($item, 'dimensi') ?? '-' }}</td>
                                    <td>{{ data_get($item, 'sub_demensi') ?? data_get($item, 'sub_dimensi') ?? '-' }}</td>
                                    <td>{{ data_get($item, 'nilai') ?? '-' }}</td>
                                    <td>{{ data_get($item, 'deskripsi') ?? '-' }}</td>
                                        <td>
                                            <a href="@if(request()->is('guru/*')){{ route('guru.penilaian.kokurikuler.edit', $item->id ?? $item->id) }}@else{{ route('admin.penilaian.kokurikuler.edit', $item->id ?? $item->id) }}@endif" class="btn btn-sm btn-primary" title="Edit"><i class="bi bi-pencil-fill"></i></a>
                                            <form method="POST" action="@if(request()->is('guru/*')){{ route('guru.penilaian.kokurikuler.destroy', $item->id ?? $item->id) }}@else{{ route('admin.penilaian.kokurikuler.destroy', $item->id ?? $item->id) }}@endif" style="display:inline-block;" onsubmit="return confirm('Hapus nilai ini?');">
                                                @csrf
                                                @method('DELETE')
                                                <button class="btn btn-sm btn-danger" title="Hapus"><i class="bi bi-trash"></i></button>
                                            </form>
                                        </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="6" class="text-center text-muted">Belum ada nilai penilaian kokurikuler.</td>
                            </tr>
                        @endif
                    </tbody>
                </table>
                </div>
            </div>

            {{-- Modal create include --}}
            @includeIf('admin.penilaian.kokurikuler.create')
        </div>
    </div>

@push('scripts')
<script>
    // baseApi used by AJAX calls; set global so included create modal can reuse it
    var baseApi = (window.location.pathname.indexOf('/guru/') === 0) ? '/guru/penilaian' : '/admin/penilaian';
document.addEventListener('DOMContentLoaded', function(){
    var filterKelas = document.querySelector('select[name="filter_kelas_kok"]');
    var filterPeserta = document.querySelector('select[name="filter_peserta_kok"]');
    var kokTableWrap = document.getElementById('kokTableWrap');
    var kokInfo = document.getElementById('kokInfo');

    function updateKokVisibilityAndFilter(){
        if (!filterKelas || !filterPeserta || !kokTableWrap) return;
        var k = filterKelas.value;
        var p = filterPeserta.value;
        var rows = kokTableWrap.querySelectorAll('tbody tr');
        if (!k || !p) {
            if (kokInfo) kokInfo.style.display = '';
            kokTableWrap.style.display = 'none';
            return;
        }
        if (kokInfo) kokInfo.style.display = 'none';
        kokTableWrap.style.display = '';
        rows.forEach(function(row){
            var rk = row.getAttribute('data-kelas') || '';
            var rp = row.getAttribute('data-peserta') || '';
            var match = (String(rk) === String(k)) && (String(rp) === String(p));
            row.style.display = match ? '' : 'none';
        });
    }

    if (filterKelas && filterPeserta) {
        filterPeserta.disabled = true;
        filterKelas.addEventListener('change', function(){
            var val = this.value;
            filterPeserta.innerHTML = '<option value="">-- Pilih Peserta --</option>';
            filterPeserta.disabled = true;
            if (!val) { updateKokVisibilityAndFilter(); return; }
            fetch(baseApi + '/peserta-kelas/' + encodeURIComponent(val), { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                .then(function(res){ if(!res.ok) throw new Error('Network'); return res.json(); })
                .then(function(data){
                    if (!Array.isArray(data)) return;
                    data.forEach(function(p){ var opt = document.createElement('option'); opt.value = p.id; opt.textContent = p.nama || p.name || ('#'+p.id); filterPeserta.appendChild(opt); });
                    if (data.length > 0) filterPeserta.disabled = false;
                    updateKokVisibilityAndFilter();
                })
                .catch(function(){ /* ignore */ });
        });
        filterPeserta.addEventListener('change', function(){ updateKokVisibilityAndFilter(); });
    }

    updateKokVisibilityAndFilter();
});
</script>
@endpush

@endsection