@extends('layouts.admin')

@section('title', 'Detail Heatmap Pemetaan Kompetensi')

@section('style')
<style>
    .heatmap-table thead th {
        color: #8b8378;
        background: #fdf5e6;
        border-bottom: 2px solid #e8e4d9;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
        padding: 1rem;
    }
    .heatmap-table tbody td {
        padding: 1rem;
        border-color: #e8e4d9;
        vertical-align: middle;
    }
    .person-name {
        color: #4a3728;
        font-weight: 700;
        font-size: 0.95rem;
    }
    .score-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        padding: 0.4rem;
        border-radius: 8px;
        font-size: 0.85rem;
        font-weight: 700;
    }
    .tone-green { background: #dce5da; color: #4a6348; }
    .tone-amber { background: #fdf5e6; color: #b8860b; }
    .tone-red { background: #f2d5d3; color: #8a4843; }
</style>
@endsection

@section('content')
<div class="content-header mb-4">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h4 class="mb-1">Heatmap Pemetaan Kompetensi ({{ $assessmentYear }})</h4>
            <div class="text-muted small">Detail matriks jabatan fungsional terhadap kategori hasil kompetensi ASN.</div>
        </div>
        <div>
            <a href="{{ route('admin.dashboard') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i> Kembali ke Dashboard
            </a>
        </div>
    </div>
</div>

<div class="card border-0 shadow-sm rounded-4">
    <div class="card-body p-0">
        @if ($heatmapKompetensi->isNotEmpty())
            <div class="table-responsive">
                <table class="table heatmap-table align-middle mb-0">
                    <thead>
                        <tr>
                            <th class="border-0 px-4 py-3" style="width: 5%">No</th>
                            <th class="border-0 px-4 py-3" style="width: 50%">Jabatan Fungsional</th>
                            <th class="border-0 px-4 py-3 text-center" style="width: 15%">Kompeten</th>
                            <th class="border-0 px-4 py-3 text-center" style="width: 15%">Cukup Kompeten</th>
                            <th class="border-0 px-4 py-3 text-center" style="width: 15%">Perlu Pelatihan</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($heatmapKompetensi as $row)
                            <tr>
                                <td class="px-4 py-3 text-muted">{{ $loop->iteration }}</td>
                                <td class="px-4 py-3">
                                    <div class="person-name">{{ $row['jabatan'] }}</div>
                                </td>
                                <td class="px-4 py-3 text-center"><span class="score-pill tone-green">{{ $row['Kompeten'] }}</span></td>
                                <td class="px-4 py-3 text-center"><span class="score-pill tone-amber">{{ $row['Cukup Kompeten'] }}</span></td>
                                <td class="px-4 py-3 text-center"><span class="score-pill tone-red">{{ $row['Perlu Pelatihan'] }}</span></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="p-5 text-center text-muted">
                <i class="fas fa-table-cells-large fs-1 text-light mb-3"></i>
                <h5 class="fw-bold">Data Heatmap Belum Tersedia</h5>
                <p class="mb-0">Heatmap akan tampil setelah assessment kompetensi diproses.</p>
            </div>
        @endif
    </div>
</div>
@endsection