@extends('layouts.admin')

@section('title', 'Rekap Kebutuhan Pengembangan Kompetensi')
@section('page_title', 'Rekap Kebutuhan Pengembangan Kompetensi')

@section('style')
<style>
    

    

    

    .master-panel {
        margin-bottom: 0;
        border: 1px solid rgba(0,0,0,0.05);
        border-radius: 8px;
        box-shadow: none;
        overflow: hidden;
    }

    .master-panel .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.15rem;
        color: #4a3728;
        background: #ffffff;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        border-radius: 0;
    }

    .master-panel .card-header h5 {
        margin: 0;
        font-size: 1rem;
        font-weight: 750;
    }

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

    .form-surface {
        padding: 1.5rem 1.15rem;
        background: #ffffff;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    .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: middle;
    }

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

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

    .type-pill {
        display: inline-flex;
        padding: 0.3rem 0.55rem;
        border-radius: 6px;
        color: #7a5c1e;
        background: #e6ddc5;
        font-size: 0.75rem;
        font-weight: 700;
        white-space: nowrap;
    }

        .score-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 48px;
        padding: 0.32rem 0.55rem;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 750;
    }
    .tone-amber { color: #8c6a28; background: #f2e7c9; }

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

    @media (max-width: 575.98px) {
        
    }
</style>
@endsection

@section('content')
<section class="page-hero">
    <div>
        <h3><i class="fas fa-chart-bar"></i> Rekap Pemilihan Pelatihan Pegawai</h3>
        <p>Rangkuman pelatihan yang dipilih oleh pegawai berdasarkan hasil rekomendasi assessment.</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('admin.assessment-kompetensi.recap.export', ['tahun' => $tahun]) }}" class="btn text-white" style="background-color: #4a6348;">
            <i class="fas fa-file-excel"></i> Export Excel Rekap
        </a>
        <a href="{{ route('admin.assessment-kompetensi.index', ['tahun' => $tahun]) }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left"></i> Kembali
        </a>
    </div>
</section>

<div class="card master-panel">
    <div class="card-header">
        <div>
            <h5>Rekap per Pelatihan</h5>
            <div class="panel-subtitle">Jumlah pegawai yang membutuhkan/memilih pelatihan tersebut.</div>
        </div>
    </div>
    <div class="form-surface">
        <form method="GET">
            <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 }}" placeholder="Tahun">
                </div>
                <div class="col-md-3">
                    <button class="btn btn-primary w-100"><i class="fas fa-search"></i> Lihat Rekap</button>
                </div>
            </div>
        </form>
    </div>
    <div class="table-responsive">
        <table class="table table-clean">
            <thead>
                <tr>
                    <th>Kompetensi</th>
                    <th>Nama Pelatihan</th>
                    <th>Jenis</th>
                    <th>Bentuk</th>
                    <th class="text-center">Jumlah Pegawai Memilih</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($recap as $item)
                    <tr>
                        <td>{{ $item->nama_kompetensi }}</td>
                        <td><div class="name-strong">{{ $item->nama_pelatihan }}</div></td>
                        <td><span class="type-pill">{{ $item->jenis_pelatihan ?? '-' }}</span></td>
                        <td>{{ $item->bentuk_pelatihan === 'klasikal' ? 'Klasikal' : 'Non Klasikal' }}</td>
                        <td class="text-center">
                            <span class="score-pill tone-amber">{{ $item->pemilih_count }}</span>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="empty-state"><i class="fas fa-inbox d-block mb-2 fs-4"></i>Belum ada pelatihan yang dipilih pegawai pada periode ini.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection