@extends('layouts.app')

@section('title', 'Hasil Assessment')

@section('content')
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card card-form">
                <div class="card-header">
                    <h2><i class="fas fa-chart-pie"></i> Hasil Assessment</h2>
                    <p class="mb-0 mt-2">Hasil Penilaian Mandiri Kompetensi tahun {{ $tahun }}</p>
                </div>
                <div class="card-body">
                    <form method="GET" class="mb-3">
                        <div class="row g-2">
                            <div class="col-md-9">
                                <input type="number" name="tahun" class="form-control" value="{{ $tahun }}" min="2020"
                                    max="{{ now()->year + 1 }}">
                            </div>
                            <div class="col-md-3">
                                <button class="btn btn-outline-primary w-100">Lihat</button>
                            </div>
                        </div>
                    </form>

                    <div class="alert alert-info">
                        <div class="row">
                            <div class="col-md-3"><strong>{{ $hasil['persentase'] }}%</strong><br><small>Pemenuhan</small>
                            </div>
                            <div class="col-md-3"><strong>{{ $hasil['kategori'] }}</strong><br><small>Kategori</small></div>
                            <div class="col-md-3"><strong>{{ $hasil['ya'] }}</strong><br><small>Jawaban Ya</small></div>
                            <div class="col-md-3"><strong>{{ $hasil['tidak'] }}</strong><br><small>Perlu
                                    Pengembangan</small></div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Kompetensi</th>
                                    <th>Indikator</th>
                                    <th>Jawaban</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($hasil['rows'] as $row)
                                    <tr>
                                        <td>
                                            <strong>{{ $row['kompetensi']->nama_kompetensi }}</strong><br>
                                            <small class="text-muted">{{ $row['kompetensi']->jenis_label }}</small>
                                        </td>
                                        <td>{{ $row['indikator']->pertanyaan }}</td>
                                        <td>
                                            @if ($row['jawaban'] === 'ya')
                                                <span class="badge bg-success">Ya</span>
                                            @elseif ($row['jawaban'] === 'tidak')
                                                <span class="badge bg-warning text-dark">Tidak</span>
                                            @else
                                                <span class="badge bg-secondary">Belum Diisi</span>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="3" class="text-center text-muted py-4">Belum ada standar kompetensi.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <a href="{{ route('pegawai.assessment.form', ['tahun' => $tahun]) }}" class="btn btn-primary">Isi/Ubah
                        Assessment</a>
                    <a href="{{ route('pegawai.assessment.rekomendasi', ['tahun' => $tahun]) }}"
                        class="btn btn-outline-success">Lihat Rekomendasi</a>
                </div>
            </div>
        </div>
    </div>
@endsection