@extends('layouts.admin')

@section('title', 'Detail Jenjang Jabatan Fungsional')
@section('page_title', 'Detail Jenjang Jabatan Fungsional')

@section('style')
<style>
    

    

    

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

    .summary-tile {
        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: #2f6ea6;
        background: #e6ddc5;
        border-radius: 8px;
    }

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

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

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

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

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

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

    .action-group {
        display: flex;
        gap: 0.4rem;
        justify-content: flex-end;
    }

    @media (max-width: 575.98px) {
        

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

@section('content')
<section class="page-hero">
    <div>
        <h3><i class="fas fa-layer-group"></i> {{ $namaJabatan }}</h3>
        <p>Detail jenjang jabatan fungsional beserta jumlah pegawai tervalidasi.</p>
    </div>
    <a href="{{ route('admin.jabatan.index') }}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left"></i> Kembali
    </a>
</section>

<div class="summary-grid">
    <div class="summary-tile">
        <span class="summary-icon"><i class="fas fa-users"></i></span>
        <div>
            <div class="summary-number">{{ $totalPegawai }}</div>
            <div class="summary-label">Total Pegawai Valid</div>
        </div>
    </div>
    <div class="summary-tile">
        <span class="summary-icon"><i class="fas fa-building"></i></span>
        <div>
            <div class="summary-number" style="font-size: 1rem;">{{ $jabatan->first()?->unitKerja?->nama_unit ?? '-' }}</div>
            <div class="summary-label">Unit Kerja</div>
        </div>
    </div>
</div>

<div class="card master-panel">
    <div class="card-header">
        <div>
            <h5>Daftar Jenjang</h5>
            <div class="panel-subtitle">Jenjang yang masih memiliki pegawai terdaftar tidak dapat dihapus.</div>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-clean">
            <thead>
                <tr>
                    <th>Jenjang</th>
                    <th class="text-center">Total Pegawai</th>
                    <th>Dibuat</th>
                    <th class="text-end">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($jabatan as $item)
                    <tr>
                        <td><span class="type-pill">{{ $item->jenjang_label }}</span></td>
                        <td class="text-center">
                            <span class="score-pill tone-amber">{{ $item->pegawai_count }}</span>
                        </td>
                        <td><div class="meta-text">{{ $item->created_at->format('d-m-Y') }}</div></td>
                        <td>
                            <div class="action-group">
                                <a href="{{ route('admin.jabatan.edit', $item) }}" class="btn btn-sm btn-outline-warning" title="Edit">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form action="{{ route('admin.jabatan.destroy', $item) }}" method="POST" style="display: inline-block;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-outline-danger" title="Hapus"
                                        onclick="return confirm('Yakin ingin menghapus jenjang ini? Jenjang dengan pegawai tidak dapat dihapus.')">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="4" class="empty-state"><i class="fas fa-inbox d-block mb-2 fs-4"></i>Belum ada jenjang untuk jabatan ini.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if ($jabatan->hasPages())
                {{ $jabatan->links() }}
    @endif
</div>
@endsection