@extends('layouts.admin')

@section('title', 'Manajemen Jabatan Fungsional')
@section('page_title', 'Manajemen Jabatan Fungsional')

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

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

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

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

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

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

@section('content')
    <section class="page-hero">
        <div>
            <h3><i class="fas fa-briefcase"></i> Manajemen Jabatan Fungsional</h3>
            <p>Kelola jabatan fungsional keahlian beserta jenjangnya.</p>
        </div>
        <a href="{{ route('admin.jabatan.create') }}" class="btn btn-sage">
            <i class="fas fa-plus"></i> Tambah Jabatan
        </a>
    </section>

    <div class="card master-panel">
        <div class="card-header">
            <div>
                <h5>Daftar Jabatan Fungsional</h5>
                <div class="panel-subtitle">Dikelompokkan berdasarkan nama jabatan. Klik Edit untuk mengelola jenjang.</div>
            </div>
        </div>
        <div class="form-surface">
            <form action="{{ route('admin.jabatan.index') }}" method="GET">
                <div class="row g-3">
                    <div class="col-lg-4 col-md-12">
                        <label class="form-label">Pencarian</label>
                        <div class="input-group">
                            <span class="input-group-text bg-transparent 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"
                                placeholder="Cari nama jabatan/unit kerja..." value="{{ request('search') }}">
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div id="ajax-content">
            <div class="table-responsive-md">
                <table class="table table-clean">
                    <thead>
                        <tr>
                            <th>Nama Jabatan</th>
                            <th>Unit Kerja</th>
                            <th class="text-center">Total Pegawai</th>
                            <th class="text-center">Dibuat</th>
                            <th class="text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($jabatan as $item)
                            <tr>
                                <td>
                                    <a href="{{ route('admin.jabatan.detail', $item->nama_jabatan) }}"
                                        class="text-decoration-none">
                                        <div class="name-strong">{{ $item->nama_jabatan }}</div>
                                    </a>
                                </td>
                                <td>
                                    <div class="meta-text">{{ $item->nama_unit ?? '-' }}</div>
                                </td>
                                <td class="text-center">
                                    <span class="score-pill tone-amber">{{ $item->pegawai_count }}</span>
                                </td>
                                <td class="text-center">
                                    <div class="meta-text">{{ \Carbon\Carbon::parse($item->created_at)->format('d-m-Y') }}</div>
                                </td>
                                <td class="text-center">
                                    <div class="action-group">
                                        <a href="{{ route('admin.jabatan.detail', $item->nama_jabatan) }}"
                                            class="btn btn-sm btn-outline-secondary" title="Lihat Jenjang">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="empty-state"><i class="fas fa-inbox d-block mb-2 fs-4"></i>Belum ada
                                    jabatan fungsional.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if ($jabatan->hasPages())
                {{ $jabatan->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