@extends('layouts.admin')

@section('title', $pageTitle)
@section('page_title', $pageTitle)

@section('style')
    <style>
        .priority-list {
            display: grid;
            gap: 0.75rem;
        }

        .priority-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.8rem;
            padding: 0.72rem 0.8rem;
            background: #e8e4d9;
            border: 1px solid rgba(0, 0, 0, 0.05);
            border-radius: 8px;
        }

        .priority-rank {
            width: 28px;
            height: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #fdf5e6;
            color: #d6a658;
            font-weight: 700;
            font-size: 0.8rem;
            border-radius: 6px;
        }

        .score-pill {
            padding: 0.25rem 0.6rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 650;
            white-space: nowrap;
        }

        .tone-amber {
            color: #b8860b;
            background: #fdf5e6;
        }

        .filter-toolbar {
            padding: 1rem;
            margin-bottom: 1rem;
            background: #f8fafc;
            border: 1px solid #e7ecf1;
            border-radius: 8px;
        }

        .filter-toolbar .form-control,
        .filter-toolbar .form-select {
            min-height: 42px;
        }

        .pegawai-card {
            border: 1px solid rgba(0, 0, 0, 0.05);
            border-radius: 8px;
            box-shadow: none;
            overflow: hidden;
        }

        .pegawai-table {
            margin: 0;
        }

        .pegawai-table thead th {
            padding: 0.85rem;
            color: #637181;
            background: #ffffff;
            border-bottom: 2px solid #e7ecf1;
            font-size: 0.8rem;
            text-transform: uppercase;
            vertical-align: middle;
        }

        .pegawai-table tbody td {
            padding: 0.9rem 0.85rem;
            color: #4a3728;
            border-color: rgba(0, 0, 0, 0.05);
            vertical-align: middle;
        }

        .pegawai-name {
            color: #263747;
            font-weight: 750;
        }

        .pegawai-meta {
            display: block;
            color: #7a8794;
            font-size: 0.78rem;
            line-height: 1.45;
        }

        .jabatan-name {
            color: #263747;
            font-weight: 650;
        }

        .compact-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            padding: 0.35rem 0.55rem;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 700;
            white-space: nowrap;
        }

        .compact-badge.blue {
            color: #7a5c1e;
            background: #e6ddc5;
        }

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

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

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

        .compact-badge.gray {
            color: #8b8378;
            background: #edf0f2;
        }

        .action-group {
            display: flex;
            gap: 0.4rem;
            justify-content: center;
            align-items: center;
            white-space: nowrap;
        }

        .action-group .btn {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            border-radius: 6px;
        }

        .table-empty {
            padding: 3rem 1rem;
            color: #7a8794;
            text-align: center;
        }



        @media (max-width: 767.98px) {
            .pegawai-page-header {
                align-items: flex-start;
                flex-direction: column;
            }

            .action-group {
                justify-content: flex-start;
            }
        }
    </style>
@endsection

@section('content')
    <div class="page-hero">
        <div>
            <h5><i class="{{ $pageIcon }}"></i> {{ $pageTitle }}</h5>
            <p>Filter otomatis diterapkan saat pencarian atau pilihan berubah.</p>
        </div>
        <div>
            @unless ($isSubmissionPage)
                <a href="{{ route('admin.pegawai.create') }}" class="btn btn-sm btn-sage">
                    <i class="fas fa-plus"></i> Tambah Pegawai
                </a>
            @endunless
        </div>
    </div>

    @if (!$isSubmissionPage)
        <div class="row g-3 mb-4" id="summary-cards-container">
            <!-- Dynamic Card for Total Pegawai -->
            <div class="col-xl col-md-4 col-sm-6">
                <div class="card border-0 h-100" style="background-color: #f6f4ed; border-radius: 12px;">
                    <div class="card-body p-3 d-flex align-items-center">
                        <div class="me-3 d-flex align-items-center justify-content-center"
                            style="width: 48px; height: 48px; background-color: #e8e2d2; color: #b8860b; border-radius: 10px; font-weight: bold; font-size: 1.25rem;">
                            <i class="fas fa-users"></i>
                        </div>
                        <div>
                            <div class="fw-bold fs-4" style="color: #4a3728; line-height: 1.2;">{{ $pegawai->total() }}</div>
                            <div class="text-muted small fw-medium" style="color: #8b8378 !important;">Total Pegawai</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Static Cards for Pegawai per Jenjang -->
            @if ($pegawaiPerJenjang->isNotEmpty())
                @foreach ($pegawaiPerJenjang as $item)
                    <div class="col-xl col-md-4 col-sm-6">
                        <div class="card border-0 h-100" style="background-color: #f6f4ed; border-radius: 12px;">
                            <div class="card-body p-3 d-flex align-items-center">
                                <div class="me-3 d-flex align-items-center justify-content-center"
                                    style="width: 48px; height: 48px; background-color: #e8e2d2; color: #b8860b; border-radius: 10px; font-weight: bold; font-size: 1.25rem;">
                                    <i class="fas fa-user"></i>
                                </div>
                                <div>
                                    <div class="fw-bold fs-4" style="color: #4a3728; line-height: 1.2;">{{ $item->total }}</div>
                                    <div class="text-muted small fw-medium" style="color: #8b8378 !important;">{{ $item->nama_jenjang }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>
    @endif

    <div class="card pegawai-card">

        <div class="card-body">
            <!-- Filter Form -->
            <form method="GET" id="pegawaiFilterForm" class="filter-toolbar">
                <div class="row g-3">
                    <div class="{{ $isSubmissionPage ? 'col-lg-3' : 'col-lg-3' }} col-md-6">
                        <label class="form-label" for="pegawaiSearch">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 NIP/Nama/Email" value="{{ request('search') }}" id="pegawaiSearch">
                        </div>
                    </div>
                    @if ($isSubmissionPage)
                        <div class="col-lg-2 col-md-6">
                            <label class="form-label" for="statusFilter">Status</label>
                            <select name="status" class="form-select js-auto-filter" id="statusFilter">
                                <option value="">Semua Status</option>
                                @foreach ($statuses as $key => $label)
                                    <option value="{{ $key }}" @selected(request('status') === $key)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                    @endif
                    <div class="col-lg-2 col-md-6">
                        <label class="form-label" for="jenjangFilter">Jenjang</label>
                        <select name="jenjang_id" class="form-select js-auto-filter" id="jenjangFilter">
                            <option value="">Semua Jenjang</option>
                            @foreach ($jenjangList as $jenjang)
                                <option value="{{ $jenjang->id }}" @selected(request('jenjang_id') == $jenjang->id)>
                                    {{ $jenjang->nama_jenjang }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <label class="form-label" for="jabatanFilter">Jabatan</label>
                        <select name="nama_jabatan" class="form-select js-auto-filter" id="jabatanFilter">
                            <option value="">Semua Jabatan</option>
                            @foreach ($jabatanList as $jabatan)
                                <option value="{{ $jabatan->nama_jabatan }}"
                                    @selected(request('nama_jabatan') == $jabatan->nama_jabatan)>
                                    {{ $jabatan->nama_jabatan }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-2 col-md-6">
                        <label class="form-label" for="unitFilter">Unit Kerja</label>
                        <select name="unit_kerja" class="form-select js-auto-filter" id="unitFilter">
                            <option value="">Semua Unit</option>
                            @foreach ($unitKerjaList as $unitKerja)
                                <option value="{{ $unitKerja->nama_unit }}"
                                    @selected(request('unit_kerja') === $unitKerja->nama_unit)>
                                    {{ $unitKerja->nama_unit }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </form>

            <div id="ajax-content">
                <!-- Table -->
                <div class="table-responsive-md">
                    <table class="table pegawai-table table-hover">
                        <thead>
                            <tr>
                                <th>Pegawai</th>
                                <th class="text-center">Golongan</th>
                                <th>Jabatan</th>
                                <th>Unit Kerja</th>
                                @if ($isSubmissionPage)
                                    <th class="text-center">Status</th>
                                @endif
                                <th class="text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($pegawai as $item)
                                <tr>
                                    <td>
                                        <div class="pegawai-name">{{ $item->nama_lengkap }}</div>
                                        <div class="pegawai-meta">{{ $item->nip }}</div>
                                    </td>
                                    <td class="text-center">
                                        @if ($item->golongan)
                                            <div class="pegawai-meta">{{ $item->golongan }}</div>
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td>
                                        @if ($item->jabatan)
                                            <div>{{ $item->jabatan->nama_jabatan }}</div>
                                            <div class="pegawai-meta">{{ $item->jabatan->jenjang_label }}</div>
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td>
                                        <span class="pegawai-meta">{{ $item->unit_kerja }}</span>
                                    </td>
                                    @if ($isSubmissionPage)
                                        <td class="text-center">
                                            @if ($item->status_validasi === 'pending')
                                                <span class="compact-badge amber"><i class="fas fa-hourglass-half"></i> Pending</span>
                                            @elseif ($item->status_validasi === 'disetujui')
                                                <span class="compact-badge green"><i class="fas fa-check-circle"></i> Disetujui</span>
                                            @else
                                                <span class="compact-badge red"><i class="fas fa-times-circle"></i> Ditolak</span>
                                            @endif
                                        </td>
                                    @endif
                                    <td class="text-center">
                                        <div class="action-group">
                                            <a href="{{ route('admin.pegawai.show', $item) }}" class="btn btn-sm btn-info"
                                                title="{{ $isSubmissionPage ? 'Lihat dan Validasi' : 'Lihat Detail' }}">
                                                <i class="fas fa-eye"></i>
                                                @unless ($isSubmissionPage)
                                                    Detail
                                                @endunless
                                            </a>
                                            @unless ($isSubmissionPage)
                                                <a href="{{ route('admin.pegawai.edit', $item) }}" class="btn btn-sm btn-warning">
                                                    <i class="fas fa-edit"></i> Edit
                                                </a>
                                            @endunless
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="{{ $isSubmissionPage ? 6 : 5 }}" class="table-empty">
                                        <i class="fas fa-inbox d-block mb-2 fs-3"></i>
                                        Belum ada data pegawai.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                @if ($pegawai->total() > 0)
                    {{ $pegawai->onEachSide(1)->links() }}
                @endif
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('pegawaiFilterForm');

            if (!form) {
                return;
            }

            const tableContainer = 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 (tableContainer) tableContainer.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 newTable = doc.getElementById('ajax-content');
                        if (newTable && tableContainer) {
                            tableContainer.innerHTML = newTable.innerHTML;
                            tableContainer.style.opacity = '1';
                        }

                        const oldSummary = document.getElementById('summary-cards-container');
                        const newSummary = doc.getElementById('summary-cards-container');
                        if (oldSummary && newSummary) {
                            oldSummary.innerHTML = newSummary.innerHTML;
                        }

                        window.history.replaceState({}, '', url);
                    })
                    .catch(error => {
                        console.error('Error fetching data:', error);
                        if (tableContainer) tableContainer.style.opacity = '1';
                    });
            };

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

            form.querySelectorAll('.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); // 500ms debounce
                });
            });
        });
    </script>
@endsection