@extends('layouts.admin')

@section('title', 'Riwayat Validasi')
@section('page_title', 'Riwayat Validasi')

@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 #e8edf2;
        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: 1rem;
        background: #ffffff;
        border-bottom: 1px solid #e7ecf1;
    }

    .table-clean {
        margin: 0;
    }

    .table-clean thead th {
        padding: 0.75rem;
        color: #637181;
        background: #ffffff;
        border-bottom: 1px solid #e6ebf0;
        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: top;
    }

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

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

    .status-pill {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 115px; /* Fixed width agar sama semua */
        padding: 0.35rem 0.55rem;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 700;
        text-align: center;
        white-space: normal;
        line-height: 1.2;
    }

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

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

    .status-pill.rejected {
        color: #8a4843;
        background: #f2d5d3;
    }

    .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-clipboard-check"></i> Riwayat Validasi</h3>
        <p>Catatan lengkap tindakan validasi data pegawai yang dilakukan oleh admin.</p>
    </div>
</section>

<div class="card master-panel">
    <div class="card-header">
        <div>
            <h5>Riwayat Admin Validasi Data</h5>
            <div class="panel-subtitle">Filter berdasarkan admin, pegawai, atau status untuk menelusuri riwayat.</div>
        </div>
    </div>
    <div class="form-surface">
        <form 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 NIP/Nama Pegawai" value="{{ request('search') }}">
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <label class="form-label">Admin</label>
                    <select name="admin_id" class="form-select js-auto-filter">
                        <option value="">-- Semua Admin --</option>
                        @foreach ($adminList as $admin)
                            <option value="{{ $admin->id }}" @selected(request('admin_id') == $admin->id)>
                                {{ $admin->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-4 col-md-6">
                    <label class="form-label">Status Baru</label>
                    <select name="status_baru" class="form-select js-auto-filter">
                        <option value="">-- Semua Status --</option>
                        @foreach ($statuses as $key => $label)
                            <option value="{{ $key }}" @selected(request('status_baru') === $key)>
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
        </form>
    </div>
    <div id="ajax-content">
        <div class="table-responsive">
        <table class="table table-clean">
            <thead>
                <tr>
                    <th>Waktu</th>
                    <th>Admin</th>
                    <th>Pegawai</th>
                    <th>Status Sebelumnya</th>
                    <th>Status Baru</th>
                    <th>Catatan</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($histories as $history)
                    <tr>
                        <td><div class="meta-text">{{ $history->created_at->format('d-m-Y H:i') }}</div></td>
                        <td>
                            <div class="name-strong">{{ $history->admin->name ?? '-' }}</div>
                            <div class="meta-text">{{ $history->admin->email ?? '-' }}</div>
                        </td>
                        <td>
                            <div class="name-strong">{{ $history->pegawai->nama_lengkap ?? '-' }}</div>
                            <div class="meta-text">
                                NIP: {{ $history->pegawai->nip ?? '-' }}
                                @if ($history->pegawai)
                                    &mdash; {{ $history->pegawai->jabatan->nama_jabatan_lengkap ?? '-' }}
                                @endif
                            </div>
                        </td>
                        <td><div class="meta-text">{{ $history->status_sebelumnya_label }}</div></td>
                        <td>
                            @if ($history->status_baru === 'pending')
                                <span class="status-pill pending">{{ $history->status_baru_label }}</span>
                            @elseif ($history->status_baru === 'disetujui')
                                <span class="status-pill approved">{{ $history->status_baru_label }}</span>
                            @else
                                <span class="status-pill rejected">{{ $history->status_baru_label }}</span>
                            @endif
                        </td>
                        <td><div class="meta-text">{{ $history->catatan ?? '-' }}</div></td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="empty-state"><i class="fas fa-inbox d-block mb-2 fs-4"></i>Belum ada riwayat validasi.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if ($histories->hasPages())
                {{ $histories->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