@extends('layouts.app')

@section('title', 'Kelola Pengawas - Admin KCD')

@section('content')
<div class="page-header">
    <h1 class="page-title">Kelola Pengawas</h1>
    <p class="text-muted">Lihat data pengawas dan reset password</p>
</div>

<!-- Alert Messages -->
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <i class="bi bi-check-circle"></i> {{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <i class="bi bi-exclamation-triangle"></i> {{ session('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<!-- Statistics Cards -->
<div class="row mb-4">
    <div class="col-md-4 col-sm-6 mb-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <h6 class="card-title text-muted mb-2">Total Pengawas</h6>
                <h3 class="mb-0">{{ $pengawas->count() }}</h3>
                <small class="text-muted"><i class="bi bi-info-circle"></i> Di KCD ini</small>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-6 mb-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <h6 class="card-title text-muted mb-2">Aktif</h6>
                <h3 class="mb-0 text-success">{{ $pengawas->where('is_active', true)->count() }}</h3>
                <small class="text-success"><i class="bi bi-check-circle"></i> Terdaftar</small>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-6 mb-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <h6 class="card-title text-muted mb-2">Non-Aktif</h6>
                <h3 class="mb-0 text-warning">{{ $pengawas->where('is_active', false)->count() }}</h3>
                <small class="text-warning"><i class="bi bi-exclamation-circle"></i> Tidak aktif</small>
            </div>
        </div>
    </div>
</div>

<!-- Pengawas Table -->
<div class="card border-0 shadow-sm">
    <div class="card-header bg-white border-bottom">
        <h5 class="card-title mb-0"><i class="bi bi-table"></i> Daftar Pengawas</h5>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover" id="pengawasTable">
                <thead class="table-light">
                    <tr>
                        <th>No</th>
                        <th>Nama</th>
                        <th>Email</th>
                        <th>NIP</th>
                        <th>Pangkat/Golongan</th>
                        <th>Status</th>
                        <th>Akun User</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($pengawas as $index => $p)
                    <tr>
                        <td>{{ $index + 1 }}</td>
                        <td><strong>{{ $p->name }}</strong></td>
                        <td>{{ $p->email ?? '-' }}</td>
                        <td>{{ $p->nip ?? '-' }}</td>
                        <td>{{ $p->rank ?? '-' }}</td>
                        <td>
                            @if($p->is_active)
                                <span class="badge bg-success">Aktif</span>
                            @else
                                <span class="badge bg-secondary">Nonaktif</span>
                            @endif
                        </td>
                        <td>
                            @if($p->user)
                                <span class="badge bg-primary">
                                    <i class="bi bi-check-circle"></i> Ada
                                </span>
                            @else
                                <span class="badge bg-secondary">
                                    <i class="bi bi-x-circle"></i> Belum
                                </span>
                            @endif
                        </td>
                        <td>
                            @if($p->user)
                            <button type="button" class="btn btn-sm btn-outline-warning" title="Reset Password" onclick="resetPassword({{ $p->id }}, '{{ addslashes($p->name) }}')">
                                <i class="bi bi-key"></i>
                            </button>
                            @else
                            <span class="text-muted small">-</span>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="text-center py-4">Tidak ada data pengawas di KCD ini</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@push('scripts')
<script>
$(document).ready(function() {
    $('#pengawasTable').DataTable({
        "language": {
            "url": "//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json"
        },
        "pageLength": 25,
        "order": [[0, 'asc']]
    });
});

function resetPassword(employeeId, employeeName) {
    if (confirm(`Reset password untuk pengawas: ${employeeName}?\\n\\nPassword baru akan di-generate secara otomatis (8 digit).`)) {
        // Create form and submit
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = `/admin-kcd/pengawas/${employeeId}/reset-password`;
        
        // Add CSRF token
        const csrfToken = document.querySelector('meta[name=\"csrf-token\"]').getAttribute('content');
        const csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = '_token';
        csrfInput.value = csrfToken;
        form.appendChild(csrfInput);
        
        document.body.appendChild(form);
        form.submit();
    }
}
</script>
@endpush
@endsection