@extends('layouts.admin')

@section('title', 'Detail Assessment Kompetensi')
@section('page_title', 'Detail Assessment')

@section('style')
<style>
    .detail-hero,
    .detail-panel {
        background: #f4f1e9;
        border: 1px solid rgba(0,0,0,0.05);
        border-radius: 8px;
        box-shadow: none;
    }

    .detail-hero {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.25rem 1.5rem;
        margin-bottom: 1rem;
    }

    .detail-hero h3 {
        margin: 0 0 0.35rem;
        color: #4a3728;
        font-size: 1.3rem;
        font-weight: 750;
    }

    .hero-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
        color: #6c757d;
        font-size: 0.9rem;
    }

    .summary-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.85rem;
        margin-bottom: 1rem;
    }

    .summary-card {
        display: flex;
        gap: 0.85rem;
        align-items: center;
        padding: 1rem;
        background: #f4f1e9;
        border: 1px solid rgba(0,0,0,0.05);
        border-radius: 8px;
    }

    .summary-icon {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #7a5c1e;
        background: #e6ddc5;
        border-radius: 8px;
    }

    .summary-number {
        color: #4a3728;
        font-size: 1.45rem;
        line-height: 1;
        font-weight: 800;
    }

    .summary-label {
        margin-top: 0.25rem;
        color: #6c757d;
        font-size: 0.82rem;
    }

    .detail-panel {
        margin-bottom: 1rem;
        overflow: hidden;
    }

    .detail-panel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.15rem;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    .detail-panel-header h5 {
        margin: 0;
        color: #4a3728;
        font-size: 1rem;
        font-weight: 750;
    }

    .panel-subtitle {
        margin-top: 0.2rem;
        color: #64748b;
        font-size: 0.8rem;
    }

    .detail-panel-body {
        padding: 1.15rem;
    }

    .decision-card {
        height: 100%;
        padding: 1rem;
        background: #e8e4d9;
        border: 1px solid rgba(0,0,0,0.05);
        border-radius: 8px;
    }

    .decision-card h6 {
        margin-bottom: 0.75rem;
        color: #4a3728;
        font-weight: 750;
    }

    .subsection {
        padding: 1rem;
        margin-top: 1rem;
        background: #f4f1e9;
        border: 1px solid rgba(0,0,0,0.05);
        border-radius: 8px;
    }

    .readonly-box {
        min-height: 96px;
        padding: 0.85rem;
        background: #e8e4d9;
        border: 1px solid rgba(0,0,0,0.05);
        border-radius: 8px;
    }

    .readonly-box small {
        display: block;
        margin-bottom: 0.25rem;
        color: #6c757d;
    }

    .succession-detail {
        background: #e8e4d9;
        border: 1px solid rgba(0,0,0,0.05);
        border-radius: 8px;
    }

    .table-clean {
        margin: 0;
    }

    .table-clean thead th {
        padding: 0.75rem;
        color: #6c757d;
        background: #ffffff;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        font-size: 0.75rem;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .table-clean tbody td {
        padding: 0.85rem 0.75rem;
        border-color: rgba(0,0,0,0.05);
        vertical-align: top;
    }

    .name-strong {
        color: #334155;
        font-weight: 700;
    }

    .meta-text {
        color: #64748b;
        font-size: 0.8rem;
    }

    .status-pill {
        display: inline-flex;
        padding: 0.35rem 0.6rem;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .status-pill.success { color: #4a6348; background: #dce5da; }
    .status-pill.warning { color: #8c6a28; background: #f2e7c9; }
    .status-pill.neutral { color: #8b8378; background: #e8e4d9; }
    .status-pill.primary { color: #7a5c1e; background: #e6ddc5; }

    .training-list {
        display: grid;
        gap: 0.75rem;
    }

    .training-item {
        padding: 0.9rem;
        background: #e8e4d9;
        border: 1px solid rgba(0,0,0,0.05);
        border-radius: 8px;
    }

    .empty-state {
        padding: 2rem 1rem;
        color: #64748b;
        text-align: center;
    }

    @media (max-width: 991.98px) {
        .summary-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 575.98px) {
        .detail-hero,
        .detail-panel-header {
            align-items: flex-start;
            flex-direction: column;
        }

        .summary-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
@endsection

@section('content')
<section class="detail-hero">
    <div>
        <h3>{{ $pegawai->nama_lengkap }}</h3>
        <div class="hero-meta">
            <span><i class="fas fa-id-card"></i> NIP {{ $pegawai->nip }}</span>
            <span><i class="fas fa-briefcase"></i> {{ $hasil['jabatan']?->nama_jabatan_lengkap ?? '-' }}</span>
            <span><i class="fas fa-calendar"></i> Tahun {{ $tahun }}</span>
        </div>
    </div>
    <a href="{{ route('admin.assessment-kompetensi.index', ['tahun' => $tahun]) }}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left"></i> Kembali
    </a>
</section>

<section class="summary-grid">
    <div class="summary-card">
        <span class="summary-icon"><i class="fas fa-chart-pie"></i></span>
        <div>
            <div class="summary-number">{{ $hasil['persentase'] }}%</div>
            <div class="summary-label">Pemenuhan Kompetensi</div>
        </div>
    </div>
    <div class="summary-card">
        <span class="summary-icon"><i class="fas fa-check"></i></span>
        <div>
            <div class="summary-number">{{ $hasil['ya'] }}/{{ $hasil['total'] }}</div>
            <div class="summary-label">Indikator Terpenuhi</div>
        </div>
    </div>
    <div class="summary-card">
        <span class="summary-icon"><i class="fas fa-layer-group"></i></span>
        <div>
            <div class="summary-number">{{ $hasil['kategori'] }}</div>
            <div class="summary-label">Kategori Hasil</div>
        </div>
    </div>
    <div class="summary-card">
        <span class="summary-icon"><i class="fas fa-paper-plane"></i></span>
        <div>
            <div class="summary-number">{{ ucfirst($hasil['status']) }}</div>
            <div class="summary-label">Status Assessment</div>
        </div>
    </div>
</section>

@if ($hasil['status'] === 'submitted')
    <form action="{{ route('admin.assessment-kompetensi.verify', $pegawai) }}" method="POST" class="mb-3">
        @csrf
        <input type="hidden" name="periode_tahun" value="{{ $tahun }}">
        <button type="submit" class="btn btn-sage">
            <i class="fas fa-check"></i> Verifikasi Assessment
        </button>
    </form>
@endif

<form action="{{ route('admin.assessment-kompetensi.pengembangan', $pegawai) }}" method="POST" class="detail-panel">
    @csrf
    <input type="hidden" name="periode_tahun" value="{{ $tahun }}">

    <div class="detail-panel-header">
        <div>
            <h5><i class="fas fa-route text-primary"></i> Rencana Pengembangan PNS</h5>
            <div class="panel-subtitle">Tentukan rencana pengembangan karier dan kompetensi berdasarkan hasil assessment.</div>
        </div>
        <button type="submit" class="btn btn-sage">
            <i class="fas fa-save"></i> Simpan Rencana
        </button>
    </div>

    <div class="detail-panel-body">
        <div class="row g-3">
            <div class="col-lg-6">
                <div class="decision-card">
                    <h6>PNS yang akan dikembangkan kariernya</h6>
                    <div class="btn-group" role="group" aria-label="PNS yang akan dikembangkan kariernya">
                        <input type="radio" class="btn-check" name="dikembangkan_karier" id="karierYa" value="1"
                            {{ (int) old('dikembangkan_karier', (int) $pengembangan->dikembangkan_karier) === 1 ? 'checked' : '' }}>
                        <label class="btn btn-outline-sage" for="karierYa">Ya</label>

                        <input type="radio" class="btn-check" name="dikembangkan_karier" id="karierTidak" value="0"
                            {{ (int) old('dikembangkan_karier', (int) $pengembangan->dikembangkan_karier) === 0 ? 'checked' : '' }}>
                        <label class="btn btn-outline-secondary" for="karierTidak">Tidak</label>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="decision-card">
                    <h6>PNS yang akan dikembangkan kompetensinya</h6>
                    <div class="btn-group" role="group" aria-label="PNS yang akan dikembangkan kompetensinya">
                        <input type="radio" class="btn-check" name="dikembangkan_kompetensi" id="kompetensiYa" value="1"
                            {{ (int) old('dikembangkan_kompetensi', (int) $pengembangan->dikembangkan_kompetensi) === 1 ? 'checked' : '' }}>
                        <label class="btn btn-outline-sage" for="kompetensiYa">Ya</label>

                        <input type="radio" class="btn-check" name="dikembangkan_kompetensi" id="kompetensiTidak" value="0"
                            {{ (int) old('dikembangkan_kompetensi', (int) $pengembangan->dikembangkan_kompetensi) === 0 ? 'checked' : '' }}>
                        <label class="btn btn-outline-secondary" for="kompetensiTidak">Tidak</label>
                    </div>
                </div>
            </div>
        </div>

        <div id="detailKarierSection" class="subsection">
            <h6 class="mb-3">Detail Pengembangan Karier</h6>
            <div class="row g-3">
                <div class="col-lg-6">
                    <label class="form-label d-block">Bentuk pengembangan</label>
                    <div class="d-flex flex-wrap gap-2">
                        @foreach (['horizontal' => 'Horizontal', 'vertikal' => 'Vertikal', 'diagonal' => 'Diagonal'] as $value => $label)
                            <input type="radio" class="btn-check" name="bentuk_pengembangan_karier" id="bentukKarier{{ $value }}" value="{{ $value }}"
                                {{ old('bentuk_pengembangan_karier', $pengembangan->bentuk_pengembangan_karier) === $value ? 'checked' : '' }}>
                            <label class="btn btn-outline-primary" for="bentukKarier{{ $value }}">{{ $label }}</label>
                        @endforeach
                    </div>
                </div>
                <div class="col-lg-6">
                    <label for="waktuPelaksanaanTahun" class="form-label">Waktu pelaksanaan</label>
                    <div class="input-group">
                        <input type="number" min="1" max="5" class="form-control" id="waktuPelaksanaanTahun"
                            name="waktu_pelaksanaan_tahun"
                            value="{{ old('waktu_pelaksanaan_tahun', $pengembangan->waktu_pelaksanaan_tahun) }}"
                            placeholder="1-5">
                        <span class="input-group-text">tahun</span>
                    </div>
                </div>
                <div class="col-lg-6">
                    <label class="form-label d-block">Mekanisme pengisian jabatan</label>
                    <div class="d-flex flex-wrap gap-2">
                        @foreach (['jalur_reguler' => 'Jalur Reguler', 'jalur_percepatan' => 'Jalur Percepatan'] as $value => $label)
                            <input type="radio" class="btn-check" name="mekanisme_pengisian_jabatan" id="mekanisme{{ $value }}" value="{{ $value }}"
                                {{ old('mekanisme_pengisian_jabatan', $pengembangan->mekanisme_pengisian_jabatan) === $value ? 'checked' : '' }}>
                            <label class="btn btn-outline-primary" for="mekanisme{{ $value }}">{{ $label }}</label>
                        @endforeach
                    </div>
                </div>
                <div class="col-lg-6">
                    <label class="form-label d-block">Prosedur pengisian jabatan</label>
                    <div class="d-flex flex-wrap gap-2">
                        @foreach (['seleksi_terbuka' => 'Seleksi Terbuka', 'seleksi_tertutup' => 'Seleksi Tertutup'] as $value => $label)
                            <input type="radio" class="btn-check" name="prosedur_pengisian_jabatan" id="prosedur{{ $value }}" value="{{ $value }}"
                                {{ old('prosedur_pengisian_jabatan', $pengembangan->prosedur_pengisian_jabatan) === $value ? 'checked' : '' }}>
                            <label class="btn btn-outline-primary" for="prosedur{{ $value }}">{{ $label }}</label>
                        @endforeach
                    </div>
                </div>
                <div class="col-lg-12">
                    <label for="catatanPengembanganKarier" class="form-label">Catatan pengembangan karier</label>
                    <textarea id="catatanPengembanganKarier" name="catatan_pengembangan_karier"
                        class="form-control @error('catatan_pengembangan_karier') is-invalid @enderror"
                        rows="3" maxlength="2000"
                        placeholder="Pertimbangan, target jabatan, atau informasi pendukung.">{{ old('catatan_pengembangan_karier', $pengembangan->catatan_pengembangan_karier) }}</textarea>
                    <small class="text-muted">Opsional, maksimal 2.000 karakter.</small>
                    @error('catatan_pengembangan_karier')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        <div id="detailKompetensiSection" class="subsection">
            <h6 class="mb-1">Dasar Pengembangan Kompetensi</h6>
            <p class="text-muted mb-3">Hasil kompetensi dan sejarah karier diambil otomatis, sedangkan kinerja dan suksesi ditetapkan admin.</p>

            <div class="row g-3">
                <div class="col-lg-6">
                    <label class="form-label">Hasil Penilaian Kompetensi</label>
                    <div class="readonly-box">
                        <small>Otomatis dari Penilaian Mandiri Kompetensi tahun {{ $tahun }}</small>
                        <strong>{{ $hasilKompetensiOtomatis }}</strong>
                    </div>
                </div>
                <div class="col-lg-6">
                    <label class="form-label">Sejarah Karier</label>
                    <div class="readonly-box">
                        <small>Otomatis dari jabatan aktif pegawai</small>
                        <strong>{{ $sejarahKarierOtomatis }}</strong>
                    </div>
                </div>
                <div class="col-lg-6">
                    <label for="hasilPenilaianKinerja" class="form-label">Hasil Penilaian Kinerja</label>
                    <textarea id="hasilPenilaianKinerja" name="hasil_penilaian_kinerja"
                        class="form-control @error('hasil_penilaian_kinerja') is-invalid @enderror"
                        rows="2" maxlength="2000"
                        placeholder="Tuliskan ringkasan hasil penilaian kinerja pegawai.">{{ old('hasil_penilaian_kinerja', $pengembangan->hasil_penilaian_kinerja) }}</textarea>
                    @error('hasil_penilaian_kinerja')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-lg-6">
                    <label for="perencanaanSuksesi" class="form-label">Perencanaan Suksesi</label>
                    <select id="perencanaanSuksesi" name="perencanaan_suksesi"
                        class="form-select @error('perencanaan_suksesi') is-invalid @enderror">
                        <option value="">-- Pilih kategori 1-9 --</option>
                        @foreach ($perencanaanSuksesiOptions as $nilaiSuksesi => $opsiSuksesi)
                            <option value="{{ $nilaiSuksesi }}"
                                @selected((string) old('perencanaan_suksesi', $pengembangan->perencanaan_suksesi) === (string) $nilaiSuksesi)>
                                {{ $nilaiSuksesi }} - {{ $opsiSuksesi['kategori'] }} ({{ $opsiSuksesi['kondisi'] }})
                            </option>
                        @endforeach
                    </select>
                    @error('perencanaan_suksesi')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror

                    <div id="detailPerencanaanSuksesi" class="succession-detail p-3 mt-3 d-none">
                        <div class="mb-2">
                            <small class="text-muted d-block">Kategori</small>
                            <strong id="kategoriSuksesi">-</strong>
                        </div>
                        <div class="mb-2">
                            <small class="text-muted d-block">Kondisi</small>
                            <span id="kondisiSuksesi">-</span>
                        </div>
                        <div>
                            <small class="text-muted d-block">Kegiatan</small>
                            <span id="kegiatanSuksesi">-</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>


<section class="detail-panel">
    <div class="detail-panel-header">
        <div>
            <h5><i class="fas fa-list-check text-warning"></i> Jawaban Indikator Kompetensi</h5>
            <div class="panel-subtitle">Daftar indikator berdasarkan standar kompetensi jabatan aktif pegawai.</div>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-clean">
            <thead>
                <tr>
                    <th>Kompetensi</th>
                    <th>Indikator</th>
                    <th>Jawaban</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($hasil['rows'] as $row)
                    <tr>
                        <td>
                            <div class="name-strong">{{ $row['kompetensi']->nama_kompetensi }}</div>
                            <div class="meta-text">{{ $row['kompetensi']->jenis_label }}</div>
                        </td>
                        <td>{{ $row['indikator']->pertanyaan }}</td>
                        <td>
                            @if ($row['jawaban'] === 'ya')
                                <span class="status-pill success">Ya</span>
                            @elseif ($row['jawaban'] === 'tidak')
                                <span class="status-pill warning">Tidak</span>
                            @else
                                <span class="status-pill neutral">Belum Diisi</span>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="3" class="empty-state">Belum ada indikator assessment.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</section>

<section class="detail-panel">
    <div class="detail-panel-header">
        <div>
            <h5><i class="fas fa-graduation-cap text-warning"></i> Rekomendasi Pelatihan</h5>
            <div class="panel-subtitle">Ditampilkan berdasarkan kompetensi yang masih perlu pelatihan.</div>
        </div>
    </div>
    <div class="detail-panel-body">
        @if ($hasil['rekomendasi']->isEmpty())
            <div class="empty-state">Tidak ada rekomendasi pelatihan aktif.</div>
        @else
            <div class="training-list">
                @foreach ($hasil['rekomendasi'] as $item)
                    @php
                        $isChosen = $pegawai->pilihanPelatihan->where('pivot.periode_tahun', $tahun)->contains('id', $item->id);
                    @endphp
                    <div class="training-item" style="{{ $isChosen ? 'border-left: 4px solid #198754; background-color: #f8fff9;' : '' }}">
                        <div class="d-flex justify-content-between align-items-start gap-3 flex-wrap">
                            <div>
                                <div class="name-strong">
                                    {{ $item->nama_pelatihan }}
                                </div>
                                <div class="meta-text">{{ $item->kompetensi->nama_kompetensi }} | {{ $item->jenis_pelatihan ?? '-' }}</div>
                            </div>
                            <div class="d-flex flex-column align-items-end gap-2">
                                <span class="status-pill primary">{{ $item->bentuk_label }}</span>
                                @if($isChosen)
                                    <span class="badge bg-success"><i class="fas fa-check me-1"></i> Dipilih Pegawai</span>
                                @else
                                    <span class="badge bg-secondary"><i class="fas fa-minus me-1"></i> Tidak Dipilih</span>
                                @endif
                            </div>
                        </div>
                        @if ($item->deskripsi)
                            <p class="mb-0 mt-2 text-muted">{{ $item->deskripsi }}</p>
                        @endif
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</section>
@endsection

@section('script')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const bindConditionalSection = function (radioName, sectionId) {
            const section = document.getElementById(sectionId);
            const radios = document.querySelectorAll(`input[name="${radioName}"]`);

            const toggleSection = function () {
                const selected = document.querySelector(`input[name="${radioName}"]:checked`);

                if (!section || !selected) {
                    return;
                }

                section.classList.toggle('d-none', selected.value !== '1');
            };

            if (!section) {
                return;
            }

            radios.forEach(function (radio) {
                radio.addEventListener('change', toggleSection);
            });

            toggleSection();
        };

        bindConditionalSection('dikembangkan_karier', 'detailKarierSection');
        bindConditionalSection('dikembangkan_kompetensi', 'detailKompetensiSection');

        const successionOptions = @json($perencanaanSuksesiOptions);
        const successionSelect = document.getElementById('perencanaanSuksesi');
        const successionDetail = document.getElementById('detailPerencanaanSuksesi');

        const renderSuccessionDetail = function () {
            const selected = successionOptions[successionSelect?.value];

            if (!successionDetail || !selected) {
                successionDetail?.classList.add('d-none');
                return;
            }

            document.getElementById('kategoriSuksesi').textContent =
                `${successionSelect.value} - ${selected.kategori}`;
            document.getElementById('kondisiSuksesi').textContent = selected.kondisi;
            document.getElementById('kegiatanSuksesi').textContent = selected.kegiatan;
            successionDetail.classList.remove('d-none');
        };

        successionSelect?.addEventListener('change', renderSuccessionDetail);
        renderSuccessionDetail();
    });
</script>
@endsection