@extends('layouts.admin')

@section('title', 'Akun Pegawai')
@section('page_title', 'Akun Pegawai')

@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: 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.active {
        color: #4a6348;
        background: #dce5da;
    }

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

    .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) {
        
    }
</style>
@endsection

@section('content')
<section class="page-hero">
    <div>
        <h3><i class="fas fa-user-lock"></i> Kelola Akun Pegawai</h3>
        <p>Buat atau reset akun login untuk pegawai yang telah tervalidasi.</p>
    </div>
</section>

<div class="card master-panel">
    <div class="card-header">
        <div>
            <h5>Daftar Akun Pegawai</h5>
            <div class="panel-subtitle">Pegawai dengan akun aktif dapat login ke portal pegawai.</div>
        </div>
    </div>
    <div class="form-surface">
        <form method="GET">
            <div class="row g-3">
                <div class="col-md-8">
                    <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/NIP/email" value="{{ request('search') }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <select name="akun" class="form-select js-auto-search">
                        <option value="">-- Semua Akun --</option>
                        <option value="ada" @selected(request('akun') === 'ada')>Sudah Punya Akun</option>
                        <option value="belum" @selected(request('akun') === 'belum')>Belum Punya Akun</option>
                    </select>
                </div>
            </div>
        </form>
    </div>
    <div id="ajax-content">
        <div class="table-responsive">
        <table class="table table-clean">
            <thead>
                <tr>
                    <th>Pegawai</th>
                    <th>Email Login</th>
                    <th>Unit Kerja</th>
                    <th>Jabatan</th>
                    <th>Status Akun</th>
                    <th class="text-end">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($pegawai as $item)
                    <tr>
                        <td>
                            <div class="name-strong">{{ $item->nama_lengkap }}</div>
                            <div class="meta-text">NIP {{ $item->nip }}</div>
                        </td>
                        <td><div class="meta-text">{{ $item->email }}</div></td>
                        <td><div class="meta-text">{{ $item->unit_kerja }}</div></td>
                        <td><div class="meta-text">{{ $item->jabatan->nama_jabatan_lengkap ?? '-' }}</div></td>
                        <td>
                            @if ($item->user)
                                <span class="status-pill active">Aktif</span>
                                @if ($item->user->must_change_password)
                                    <div class="meta-text mt-1">Wajib ganti password</div>
                                @endif
                            @else
                                <span class="status-pill inactive">Belum Ada</span>
                            @endif
                        </td>
                        <td>
                            <div class="action-group">
                                @if ($item->user)
                                    <form action="{{ route('admin.pegawai-accounts.reset-password', $item) }}" method="POST"
                                        onsubmit="return confirm('Reset password sementara akun pegawai ini?')">
                                        @csrf
                                        <button type="submit" class="btn btn-sm btn-outline-warning">
                                            <i class="fas fa-key"></i> Reset Password
                                        </button>
                                    </form>
                                @else
                                    <form action="{{ route('admin.pegawai-accounts.store', $item) }}" method="POST"
                                        onsubmit="return confirm('Buat akun login untuk pegawai ini?')">
                                        @csrf
                                        <button type="submit" class="btn btn-sm btn-outline-success">
                                            <i class="fas fa-user-plus"></i> Buat Akun
                                        </button>
                                    </form>
                                @endif
                            </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 pegawai yang sesuai filter.</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