@extends('layouts.superadmin')

@section('title', 'Admin Staff & Officers')

@section('content')
<!-- Header Banner with Provision Action -->
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem;">
  <div>
    <h1 style="font-size: 1.6rem; font-family: var(--font-heading); margin: 0 0 0.35rem; color: #fff;">
      <i class="fas fa-user-shield" style="color: #F59E0B; margin-right: 0.5rem;"></i> Administrator Staff & District Officers
    </h1>
    <p style="margin: 0; font-size: 0.9rem; color: #94A3B8;">
      Provision and control administrative access permissions, officer district assignments, and account lifecycles.
    </p>
  </div>

  <div>
    <a href="{{ route('superadmin.admins.create') }}" class="btn btn-sm" style="background: #F59E0B; color: #000; font-weight: 700; padding: 0.6rem 1.25rem;">
      <i class="fas fa-user-plus"></i> Provision New Administrator
    </a>
  </div>
</div>

<!-- Filters Toolbar -->
<div class="superadmin-card" style="padding: 1rem 1.25rem; margin-bottom: 1.5rem;">
  <form action="{{ route('superadmin.admins.index') }}" method="GET" style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
    <div style="flex: 1; min-width: 200px;">
      <input type="text" 
             name="search" 
             value="{{ $search ?? '' }}" 
             placeholder="Search by name, email, username or phone..." 
             style="width: 100%; padding: 0.55rem 0.85rem; background: #0B111E; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); color: #fff; font-size: 0.88rem;">
    </div>

    <div style="min-width: 160px;">
      <select name="role" style="width: 100%; padding: 0.55rem 0.85rem; background: #0B111E; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); color: #fff; font-size: 0.88rem;">
        <option value="all">All Roles</option>
        <option value="super_admin" {{ ($role ?? '') === 'super_admin' ? 'selected' : '' }}>Super Admin</option>
        <option value="admin" {{ ($role ?? '') === 'admin' ? 'selected' : '' }}>General Admin</option>
        <option value="district_officer" {{ ($role ?? '') === 'district_officer' ? 'selected' : '' }}>District Officer</option>
      </select>
    </div>

    <div>
      <button type="submit" class="btn btn-sm" style="background: #38BDF8; color: #000; font-weight: 600; height: 38px;">
        <i class="fas fa-filter"></i> Apply Filters
      </button>
    </div>

    @if(!empty($search) || ($role ?? 'all') !== 'all')
      <div>
        <a href="{{ route('superadmin.admins.index') }}" class="btn btn-sm btn-outline" style="height: 38px; display: inline-flex; align-items: center;">
          <i class="fas fa-times"></i> Reset
        </a>
      </div>
    @endif
  </form>
</div>

<!-- Admin Table -->
<div class="superadmin-card" style="padding: 0; overflow: hidden;">
  <div class="table-responsive">
    <table style="width: 100%; border-collapse: collapse; font-size: 0.9rem; text-align: left;">
      <thead>
        <tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02); color: #94A3B8;">
          <th style="padding: 1rem 1.25rem;">Staff Member</th>
          <th style="padding: 1rem 1.25rem;">Contact</th>
          <th style="padding: 1rem 1.25rem;">Role & Jurisdiction</th>
          <th style="padding: 1rem 1.25rem;">Status</th>
          <th style="padding: 1rem 1.25rem;">Created</th>
          <th style="padding: 1rem 1.25rem; text-align: right;">Action</th>
        </tr>
      </thead>
      <tbody>
        @forelse($admins as $adminUser)
          <tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.04);">
            <td style="padding: 1rem 1.25rem;">
              <strong style="color: #fff; font-size: 0.95rem; display: block;">{{ $adminUser->name }}</strong>
              <span style="color: #94A3B8; font-size: 0.8rem; font-family: monospace;">@ {{ $adminUser->username }}</span>
            </td>

            <td style="padding: 1rem 1.25rem;">
              <span style="color: #CBD5E1; display: block; font-size: 0.88rem;">{{ $adminUser->email }}</span>
              <span style="color: #64748B; font-size: 0.8rem;">{{ $adminUser->phone ?? 'N/A' }}</span>
            </td>

            <td style="padding: 1rem 1.25rem;">
              @if($adminUser->isSuperAdmin())
                <span class="badge" style="background: rgba(245, 158, 11, 0.15); color: #F59E0B; border: 1px solid rgba(245, 158, 11, 0.3); font-size: 0.75rem; font-weight: 700;">
                  <i class="fas fa-crown"></i> SUPER ADMIN
                </span>
              @elseif($adminUser->isDistrictOfficer())
                <span class="badge" style="background: rgba(56, 189, 248, 0.15); color: #38BDF8; font-size: 0.75rem; font-weight: 600;">
                  <i class="fas fa-map-location-dot"></i> DISTRICT OFFICER
                </span>
                <span style="display: block; font-size: 0.78rem; color: #94A3B8; margin-top: 3px;">
                  {{ $adminUser->assigned_district ?? 'Unassigned' }}
                </span>
              @else
                <span class="badge" style="background: rgba(16, 185, 129, 0.15); color: #10B981; font-size: 0.75rem; font-weight: 600;">
                  <i class="fas fa-shield-alt"></i> GENERAL ADMIN
                </span>
              @endif
            </td>

            <td style="padding: 1rem 1.25rem;">
              @if($adminUser->status === 'active')
                <span class="badge" style="background: rgba(16, 185, 129, 0.15); color: #10B981; font-weight: 600; font-size: 0.75rem;">
                  <i class="fas fa-check-circle"></i> Active
                </span>
              @else
                <span class="badge" style="background: rgba(239, 68, 68, 0.15); color: #EF4444; font-weight: 600; font-size: 0.75rem;">
                  <i class="fas fa-ban"></i> Suspended
                </span>
              @endif
            </td>

            <td style="padding: 1rem 1.25rem; color: #94A3B8; font-size: 0.85rem; white-space: nowrap;">
              {{ $adminUser->created_at->format('d M Y') }}
            </td>

            <td style="padding: 1rem 1.25rem; text-align: right; white-space: nowrap;">
              <a href="{{ route('superadmin.admins.show', $adminUser->id) }}" class="btn btn-sm btn-outline" style="font-size: 0.8rem; padding: 0.35rem 0.65rem; margin-right: 0.35rem;" title="View Profile & Audit Trail">
                <i class="fas fa-eye"></i> View
              </a>
              <a href="{{ route('superadmin.admins.edit', $adminUser->id) }}" class="btn btn-sm" style="background: rgba(245, 158, 11, 0.15); color: #F59E0B; border: 1px solid rgba(245, 158, 11, 0.3); font-size: 0.8rem; padding: 0.35rem 0.65rem; margin-right: 0.35rem;" title="Edit Account & Permissions">
                <i class="fas fa-edit"></i> Edit
              </a>
              @if($adminUser->id !== Auth::id())
                <form action="{{ route('superadmin.admins.toggle-status', $adminUser->id) }}" method="POST" style="display: inline;" onsubmit="return confirm('Are you sure you want to change account status for {{ $adminUser->name }}?');">
                  @csrf
                  @if($adminUser->status === 'active')
                    <button type="submit" class="btn btn-sm" style="background: rgba(239, 68, 68, 0.15); color: #EF4444; border: 1px solid rgba(239, 68, 68, 0.3); font-size: 0.8rem; font-weight: 600;">
                      <i class="fas fa-ban"></i> Deactivate
                    </button>
                  @else
                    <button type="submit" class="btn btn-sm" style="background: rgba(16, 185, 129, 0.15); color: #10B981; border: 1px solid rgba(16, 185, 129, 0.3); font-size: 0.8rem; font-weight: 600;">
                      <i class="fas fa-check"></i> Reactivate
                    </button>
                  @endif
                </form>
              @else
                <span style="font-size: 0.78rem; color: #64748B; font-style: italic;">(Your Session)</span>
              @endif
            </td>
          </tr>
        @empty
          <tr>
            <td colspan="6" style="text-align: center; padding: 3rem; color: #64748B;">
              No administrators match the specified filter criteria.
            </td>
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>

  @if($admins->hasPages())
    <div style="padding: 1.25rem 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; justify-content: space-between; align-items: center;">
      <div style="color: #94A3B8; font-size: 0.85rem;">
        Showing {{ $admins->firstItem() }} to {{ $admins->lastItem() }} of {{ $admins->total() }} administrative staff
      </div>
      <div>
        {{ $admins->links() }}
      </div>
    </div>
  @endif
</div>
@endsection