@extends('client.layouts.dashboard')

@section('title', 'Admin Members')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="mb-1">Admin Members</h4>
        <p class="text-muted mb-0">Manage admin access for your organization</p>
    </div>
    <div>
        @if($client->canAddMoreClientAdmins())
        <a href="{{ route('client.admins.create') }}" class="btn btn-primary">
            <i class="bi bi-person-plus me-2"></i>Add Admin
        </a>
        @else
        <button class="btn btn-secondary" disabled title="Admin limit reached">
            <i class="bi bi-person-plus me-2"></i>Limit Reached
        </button>
        @endif
    </div>
</div>

<div class="d-flex align-items-center gap-2 mb-4">
    <button type="button" class="info-hint" data-bs-toggle="popover" data-bs-content="<strong>Owner</strong> can manage other admins. <strong>Manager</strong> can manage users and templates only.">
        <i class="bi bi-info-circle"></i>
    </button>
    <small class="text-muted">Role permissions info</small>
</div>

<!-- Admins Table -->
<div class="table-card">
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Admin</th>
                    <th>Role</th>
                    <th>Status</th>
                    <th>Last Login</th>
                    <th>Added</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($admins as $admin)
                <tr>
                    <td>
                        <div class="d-flex align-items-center gap-2">
                            <div class="rounded-circle bg-{{ $admin->role === 'owner' ? 'danger' : 'primary' }} text-white d-flex align-items-center justify-content-center" style="width: 36px; height: 36px;">
                                {{ strtoupper(substr($admin->name, 0, 1)) }}
                            </div>
                            <div>
                                <div class="fw-medium">{{ $admin->name }}</div>
                                <small class="text-muted">{{ $admin->email }}</small>
                            </div>
                        </div>
                    </td>
                    <td>
                        <span class="badge bg-{{ $admin->role === 'owner' ? 'danger' : 'primary' }}">
                            <i class="bi bi-{{ $admin->role === 'owner' ? 'star-fill' : 'person-badge' }} me-1"></i>
                            {{ ucfirst($admin->role) }}
                        </span>
                    </td>
                    <td>
                        @if($admin->is_active)
                        <span class="badge bg-success">Active</span>
                        @else
                        <span class="badge bg-secondary">Inactive</span>
                        @endif
                    </td>
                    <td>
                        <small class="text-muted">
                            {{ $admin->last_login_at ? $admin->last_login_at->diffForHumans() : 'Never' }}
                        </small>
                    </td>
                    <td>
                        <small class="text-muted">{{ $admin->created_at->format('M d, Y') }}</small>
                    </td>
                    <td>
                        @if($admin->id !== auth('client_admin')->id())
                        <div class="d-flex gap-1">
                            @if(auth('client_admin')->user()->hasPermission('client.admins.edit'))
                            <a href="{{ route('client.admins.permissions', $admin->id) }}" class="btn btn-sm btn-outline-primary" title="Manage Permissions">
                                <i class="bi bi-shield-lock me-1"></i>Permissions
                            </a>
                            @endif
                            @if(auth('client_admin')->user()->hasPermission('client.admins.toggle_status'))
                            <form method="POST" action="{{ route('client.admins.toggle-status', $admin->id) }}" class="d-inline">
                                @csrf
                                <button type="submit" class="btn btn-sm btn-{{ $admin->is_active ? 'warning' : 'success' }}"
                                    data-confirm="{{ $admin->is_active ? 'Deactivate' : 'Activate' }} this admin?"
                                    data-confirm-title="{{ $admin->is_active ? 'Deactivate' : 'Activate' }} Admin"
                                    data-confirm-btn="{{ $admin->is_active ? 'Deactivate' : 'Activate' }}"
                                    data-confirm-class="btn-{{ $admin->is_active ? 'warning' : 'success' }}">
                                    <i class="bi bi-{{ $admin->is_active ? 'pause' : 'play' }} me-1"></i>
                                    {{ $admin->is_active ? 'Deactivate' : 'Activate' }}
                                </button>
                            </form>
                            @endif
                        </div>
                        @else
                        <span class="badge bg-light text-muted">Current User</span>
                        @endif
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="text-center py-5">
                        <div class="text-muted mb-3">
                            <i class="bi bi-person-gear" style="font-size: 3rem;"></i>
                        </div>
                        <p class="mb-0">No admin members found</p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<div class="mt-3 text-muted small">
    <button type="button" class="info-hint" data-bs-toggle="popover" data-bs-content="Admin limit: {{ $admins->count() }} / {{ $client->max_client_admins }}">
        <i class="bi bi-info-circle"></i>
    </button>
    <span class="ms-1">Admin quota</span>
</div>
@endsection