@extends('layouts.admin')

@section('title', 'Assessment Kompetensi')
@section('page_title', 'Assessment 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.85rem;
            color: #637181;
            background: #ffffff;
            border-bottom: 2px solid #e7ecf1;
            font-size: 0.8rem;
            text-transform: uppercase;
            white-space: nowrap;
            vertical-align: middle;
        }

        .table-clean tbody td {
            padding: 0.9rem 0.85rem;
            color: #4a3728;
            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;
        }

        .status-pill {
            display: inline-flex;
            padding: 0.3rem 0.55rem;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 700;
        }

        .status-pill.done {
            color: #4a6348;
            background: #dce5da;
        }

        .status-pill.partial {
            color: #8c6a28;
            background: #f2e7c9;
        }

        .status-pill.pending {
            color: #8b8378;
            background: #ffffff;
        }

        .score-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 58px;
            padding: 0.32rem 0.55rem;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 750;
        }

        .tone-gold {
            color: #7a5c1e;
            background: #e6ddc5;
        }

        .tone-amber {
            color: #8c6a28;
            background: #f2e7c9;
        }

        .tone-green {
            color: #4a6348;
            background: #dce5da;
        }

        .tone-red {
            color: #8a4843;
            background: #f2d5d3;
        }

        .tone-gray {
            color: #8b8378;
            background: #e8e4d9;
        }

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

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

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

@section('content')
    <section class="page-hero">
        <div>
            <h3><i class="fas fa-clipboard-list"></i> Assessment Kompetensi</h3>
            <p>Pantau penilaian mandiri kompetensi pegawai berdasarkan tahun.</p>
        </div>
        <a href="{{ route('admin.assessment-kompetensi.recap', ['tahun' => $tahun]) }}" class="btn btn-primary">
            <i class="fas fa-chart-bar"></i> Rekap Kebutuhan
        </a>
    </section>

    <div class="card master-panel">
        <div class="card-header">
            <div>
                <h5>Daftar Penilaian Mandiri Kompetensi</h5>
                <div class="panel-subtitle">Filter berdasarkan nama, NIP, atau tahun assessment.</div>
            </div>
        </div>
        <div class="form-surface">
            <form method="GET" action="{{ route('admin.assessment-kompetensi.index') }}">
                <div class="row g-2">
                    <div class="col-md-3">
                        <label class="form-label">Pencarian</label>
                        <div class="input-group">
                            <span class="input-group-text bg-white text-muted border-end-0"><i
                                    class="fas fa-search"></i></span>
                            <input type="text" name="search" class="form-control border-start-0 ps-0 js-auto-search"
                                value="{{ request('search') }}" placeholder="Cari nama/NIP">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Jenjang</label>
                        <select name="jenjang_id" class="form-select">
                            <option value="">Semua Jenjang</option>
                            @foreach($jenjangList as $jenjang)
                                <option value="{{ $jenjang->id }}" {{ request('jenjang_id') == $jenjang->id ? 'selected' : '' }}>
                                    {{ $jenjang->nama_jenjang }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Jabatan</label>
                        <select name="nama_jabatan" class="form-select">
                            <option value="">Semua Jabatan</option>
                            @foreach($jabatanList as $jabatan)
                                <option value="{{ $jabatan->nama_jabatan }}" {{ request('nama_jabatan') == $jabatan->nama_jabatan ? 'selected' : '' }}>{{ $jabatan->nama_jabatan }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Tahun</label>
                        <input type="number" name="tahun" class="form-control" value="{{ $tahun }}" min="2020"
                            max="{{ now()->year + 1 }}" placeholder="Tahun">
                    </div>
                    <div class="col-12 d-flex gap-2 justify-content-end mt-3">
                        <a href="{{ route('admin.assessment-kompetensi.index') }}"
                            class="btn btn-outline-secondary">Reset</a>
                        <button type="submit" class="btn btn-primary"><i class="fas fa-filter"></i> Filter</button>
                        <a href="{{ route('admin.assessment-kompetensi.export', request()->query()) }}"
                            class="btn text-white" style="background-color: #4a6348;"><i class="fas fa-file-excel"></i>
                            Rekap Kompetensi</a>
                    </div>
                </div>
            </form>
        </div>
        <div id="ajax-content">
            <div class="table-responsive">
                <table class="table table-clean">
                    <thead>
                        <tr>
                            <th>NIP</th>
                            <th>Nama</th>
                            <th>Jabatan</th>
                            <th class="text-center">Pemenuhan</th>
                            <th class="text-center">Kategori</th>
                            <th class="text-center">Status</th>
                            <th class="text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($pegawai as $item)
                            <tr>
                                <td><span class="name-strong font-monospace">{{ $item->nip }}</span></td>
                                <td>
                                    <div class="name-strong">{{ $item->nama_lengkap }}</div>
                                </td>
                                <td>
                                    <div class="meta-text">{{ $item->jabatan->nama_jabatan_lengkap ?? '-' }}</div>
                                </td>
                                <td class="text-center">
                                    <span
                                        class="score-pill {{ $item->assessment_persentase >= 75 ? 'tone-green' : ($item->assessment_persentase >= 50 ? 'tone-amber' : 'tone-red') }}">{{ $item->assessment_persentase }}%</span>
                                </td>
                                <td class="text-center">
                                    <div class="meta-text">{{ $item->assessment_kategori }}</div>
                                </td>
                                <td class="text-center">
                                    @php
                                        $status = strtolower($item->assessment_status);
                                        $pillClass = match ($status) {
                                            'selesai' => 'done',
                                            'sebagian' => 'partial',
                                            default => 'pending',
                                        };
                                    @endphp
                                    <span class="status-pill {{ $pillClass }}">{{ ucfirst($item->assessment_status) }}</span>
                                </td>
                                <td class="text-center">
                                    <div class="action-group">
                                        <a href="{{ route('admin.assessment-kompetensi.show', ['pegawai' => $item->id, 'tahun' => $tahun]) }}"
                                            class="btn btn-sm btn-outline-secondary">
                                            <i class="fas fa-eye"></i> Detail
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="empty-state"><i class="fas fa-inbox d-block mb-2 fs-4"></i>Belum ada
                                    assessment pada tahun ini.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if ($pegawai->hasPages())
                {{ $pegawai->links() }}
            @endif
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.querySelector('form[method="GET"], .filter-card form');
            if (!form) return;

            const contentContainer = document.getElementById('ajax-content');

            const submitFilter = function () {
                const url = new URL(form.action || window.location.href);
                const formData = new FormData(form);
                const params = new URLSearchParams(formData);
                url.search = params.toString();

                if (contentContainer) contentContainer.style.opacity = '0.5';

                fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                    .then(response => response.text())
                    .then(html => {
                        const parser = new DOMParser();
                        const doc = parser.parseFromString(html, 'text/html');

                        const newContent = doc.getElementById('ajax-content');
                        if (newContent && contentContainer) {
                            contentContainer.innerHTML = newContent.innerHTML;
                            contentContainer.style.opacity = '1';
                        }

                        window.history.replaceState({}, '', url);
                    })
                    .catch(() => { if (contentContainer) contentContainer.style.opacity = '1'; });
            };

            form.addEventListener('submit', function (e) {
                e.preventDefault();
                submitFilter();
            });

            form.querySelectorAll('select, .js-auto-filter').forEach(function (input) {
                input.addEventListener('change', submitFilter);
            });

            let searchTimer;
            form.querySelectorAll('.js-auto-search').forEach(function (input) {
                input.addEventListener('input', function () {
                    clearTimeout(searchTimer);
                    searchTimer = setTimeout(submitFilter, 500);
                });
            });
        });
    </script>
@endsection