@extends('layouts.app')

@section('title', 'Form Penilaian Mandiri Kompetensi')

@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-clipboard-list"></i> Form Penilaian Mandiri Kompetensi</h2>
                <p class="mb-0 mt-2">Jawaban Ya berarti sudah memenuhi indikator. Jawaban Tidak berarti perlu pelatihan kompetensi.</p>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <strong>Jabatan Aktif:</strong> {{ $hasil['jabatan']?->nama_jabatan_lengkap ?? '-' }}
                    <br>
                    <strong>Tahun:</strong> {{ $tahun }}
                </div>

                <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 type="submit" class="btn btn-outline-primary w-100">Ganti Tahun</button>
                        </div>
                    </div>
                </form>

                @if ($hasil['standards']->isEmpty())
                    <div class="alert alert-warning">
                        Standar kompetensi untuk jabatan aktif Anda belum tersedia.
                    </div>
                @else
                    <form action="{{ route('pegawai.assessment.store') }}" method="POST">
                        @csrf
                        <input type="hidden" name="periode_tahun" value="{{ $tahun }}">

                        <div class="accordion mb-4" id="assessmentAccordion">
                            @foreach ($groupedStandards as $jenis => $standards)
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="heading-{{ $jenis }}">
                                        <button class="accordion-button {{ $loop->first ? '' : 'collapsed' }}" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#collapse-{{ $jenis }}">
                                            {{ $service->kelompokLabel($jenis) }}
                                        </button>
                                    </h2>
                                    <div id="collapse-{{ $jenis }}" class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}"
                                        data-bs-parent="#assessmentAccordion">
                                        <div class="accordion-body">
                                            @foreach ($standards as $standard)
                                                <div class="card mb-3 border">
                                                    <div class="card-body">
                                                        <h5>{{ $standard->kompetensi->nama_kompetensi }}</h5>
                                                        <p class="text-muted">{{ $standard->kompetensi->deskripsi }}</p>

                                                        @foreach ($standard->kompetensi->indikator as $indikator)
                                                            @php
                                                                $answer = $hasil['answers']->get($indikator->id)?->jawaban;
                                                            @endphp
                                                            <div class="border rounded p-3 mb-2">
                                                                <p class="mb-2">
                                                                    <strong>{{ $indikator->kode_indikator }}</strong>
                                                                    {{ $indikator->pertanyaan }}
                                                                </p>
                                                                <div class="form-check form-check-inline">
                                                                    <input class="form-check-input" type="radio"
                                                                        name="jawaban[{{ $indikator->id }}]"
                                                                        id="ya-{{ $indikator->id }}" value="ya"
                                                                        @checked($answer === 'ya') required>
                                                                    <label class="form-check-label" for="ya-{{ $indikator->id }}">Ya</label>
                                                                </div>
                                                                <div class="form-check form-check-inline">
                                                                    <input class="form-check-input" type="radio"
                                                                        name="jawaban[{{ $indikator->id }}]"
                                                                        id="tidak-{{ $indikator->id }}" value="tidak"
                                                                        @checked($answer === 'tidak') required>
                                                                    <label class="form-check-label" for="tidak-{{ $indikator->id }}">Tidak</label>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <button type="submit" name="status" value="draft" class="btn btn-secondary">
                            Simpan Draft
                        </button>
                        <button type="submit" name="status" value="submitted" class="btn btn-primary">
                            Kirim Assessment
                        </button>
                        <a href="{{ route('pegawai.dashboard') }}" class="btn btn-outline-secondary">Kembali</a>
                    </form>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection