@extends('layouts.app')

@section('content')
<div class="container-fluid px-4 py-4" style="background-color: #f8fafc; min-height: 100vh;">

    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
        <div>
            <div class="d-flex align-items-center gap-2 mb-1">
                <i class="bi bi-person-gear text-indigo-600 fs-4" style="color: #4f46e5;"></i>
                <h4 class="fw-bold text-dark mb-0">Staff Onboarding Authorization Matrix</h4>
            </div>
            <p class="text-muted small mb-0">Review, verify, and approve incoming application nodes for counter
                operation managers and field staff.</p>
        </div>
        <span class="badge bg-primary bg-opacity-10 px-3 py-2 fw-bold"
            style="color: #4f46e5 !important; background-color: rgba(79, 70, 229, 0.1) !important; border-radius: 10px; font-size: 13px;">
            Total Pending: {{ $pendingUsers->count() }}
        </span>
    </div>

    @if(session('success'))
    <div class="alert alert-success border-0 shadow-sm rounded-3 p-3 mb-4 text-success fw-semibold"
        style="background-color: #d1fae5; color: #065f46 !important;">
        <i class="bi bi-check2-circle-fill me-2"></i> {{ session('success') }}
    </div>
    @endif

    @if(session('error'))
    <div class="alert alert-danger border-0 shadow-sm rounded-3 p-3 mb-4 text-danger fw-semibold"
        style="background-color: #fee2e2; color: #991b1b !important;">
        <i class="bi bi-exclamation-octagon-fill me-2"></i> {{ session('error') }}
    </div>
    @endif

    <div class="card border-0 shadow-sm rounded-4">
        <div class="card-header bg-white border-bottom py-3 px-4">
            <h5 class="mb-0 fw-bold text-dark">Awaiting Operational Approval Request Stream</h5>
        </div>
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0 bg-white" style="border-radius: 8px; overflow: hidden;">
                <thead class="table-light text-uppercase small fw-bold">
                    <tr>
                        <th class="py-3 ps-4">SR. NO.</th>
                        <th class="py-3">STAFF MEMBER NAME</th>
                        <th class="py-3">SECURE EMAIL ENDPOINT</th>
                        <th class="py-3">REQUESTED ROLE NODE</th>
                        <th class="py-3 text-center">ACTION WORKFLOW FRAMEWORK</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($pendingUsers as $index => $user)
                    <tr>
                        <td class="ps-4 fw-bold text-muted">{{ $index + 1 }}</td>
                        <td class="fw-bold text-dark">
                            <div class="d-flex align-items-center gap-2">
                                <div class="bg-primary bg-opacity-10 text-primary rounded-circle d-flex align-items-center justify-content-center"
                                    style="width: 32px; height: 32px; color: #4f46e5 !important; background-color: rgba(79, 70, 229, 0.1) !important;">
                                    <i class="bi bi-person-fill"></i>
                                </div>
                                {{ $user->name }}
                            </div>
                        </td>
                        <td class="text-secondary small font-monospace">{{ $user->email }}</td>
                        <td>
                            <span class="badge uppercase border font-bold"
                                style="{{ $user->role === 'manager' ? 'background-color: #fef3c7; color: #92400e !important; border-color: #fcd34d !important;' : 'background-color: #e0f2fe; color: #0369a1 !important; border-color: #bae6fd !important;' }}">
                                <i
                                    class="{{ $user->role === 'manager' ? 'bi bi-briefcase me-1' : 'bi bi-person me-1' }}"></i>{{
                                $user->role }}
                            </span>
                        </td>
                        <td class="py-3">
                            <div class="d-flex justify-content-center align-items-center gap-2">
                                <form method="POST" action="{{ route('admin.staff.approve', $user->id) }}">
                                    @csrf
                                    <button
                                        class="btn btn-primary btn-sm px-3 fw-bold shadow-sm d-flex align-items-center gap-1"
                                        style="background-color: #4f46e5; border: none; border-radius: 8px; font-size: 12px;">
                                        <i class="bi bi-check-lg"></i> APPROVE
                                    </button>
                                </form>

                                <form method="POST" action="{{ route('admin.staff.reject', $user->id) }}"
                                    onsubmit="return confirm('Are you sure you want to decline this staff parameter loop?')">
                                    @csrf
                                    <button class="btn btn-white btn-sm border shadow-sm px-3 fw-semibold text-danger"
                                        style="border-radius: 8px; font-size: 12px; background: #fff;">
                                        <i class="bi bi-trash3 me-1"></i> DECLINE
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="text-center py-5 text-muted">
                            <div class="mb-2 text-success" style="color: #059669 !important;">
                                <i class="bi bi-shield-check fs-1"></i>
                            </div>
                            <h6 class="fw-bold text-dark mb-1">No Pending Onboarding Requests</h6>
                            <p class="small text-muted mb-0">All counter staff and management layers are fully
                                authorized and active.</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection