@extends('layouts.admin')

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

@push('styles')
<style>
    .ad-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem; }
    .ad-header h1 { font-size:1.5rem; font-weight:700; margin:0; }
    .ad-header p { color:var(--text-secondary,#6b7280); margin:0.25rem 0 0; font-size:0.88rem; }
    .ad-btn { display:inline-flex; align-items:center; gap:0.45rem; padding:0.6rem 1rem; border-radius:8px; font-weight:600; font-size:0.85rem; text-decoration:none; border:1px solid var(--border); background:var(--bg-card); color:var(--text-primary); cursor:pointer; }
    .ad-btn-primary { background:var(--accent,#10BFFF); color:#fff; border-color:var(--accent,#10BFFF); }
    .ad-filters { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1rem; }
    .ad-input { padding:0.5rem 0.75rem; border:1px solid var(--border); border-radius:8px; background:var(--bg-card); color:var(--text-primary); font-size:0.85rem; }
    .ad-table { width:100%; border-collapse:collapse; background:var(--bg-card); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
    .ad-table th { text-align:left; padding:0.75rem 1rem; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-secondary,#6b7280); background:var(--bg-secondary); font-weight:600; }
    .ad-table td { padding:0.75rem 1rem; border-top:1px solid var(--border); font-size:0.88rem; }
    .ad-role-pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
    .ad-role-super_admin { background:rgba(176,132,255,0.16); color:#B084FF; }
    .ad-role-admin { background:rgba(16,191,255,0.16); color:#10BFFF; }
    .ad-role-support_admin { background:rgba(0,212,170,0.16); color:#00D4AA; }
    .ad-role-data_admin { background:rgba(255,176,32,0.16); color:#FFB020; }
    .ad-status-active { color:#00D4AA; font-weight:600; }
    .ad-status-inactive { color:#FF4757; font-weight:600; }
    .ad-empty { padding:2rem; text-align:center; color:var(--text-muted,#9CA3AF); }
    .ad-empty i { font-size:2rem; opacity:0.35; display:block; margin-bottom:0.5rem; }
</style>
@endpush

@section('content')
<div class="ad-header">
    <div>
        <h1><i class="fas fa-user-shield"></i> Admin Team</h1>
        <p>Manage Tenseal staff accounts. Separate from customers — this is the team running the platform.</p>
    </div>
    @if(auth()->user() && auth()->user()->role === 'super_admin')
        <a href="{{ route('admin.admin-users.create') }}" class="ad-btn ad-btn-primary">
            <i class="fas fa-plus"></i> Add admin
        </a>
    @endif
</div>

@if(session('success'))
    <div style="background:rgba(0,212,170,0.1);color:#00D4AA;border:1px solid rgba(0,212,170,0.3);padding:0.75rem 1rem;border-radius:8px;margin-bottom:1rem;">{{ session('success') }}</div>
@endif
@if($errors->any())
    <div style="background:rgba(255,71,87,0.1);color:#FF4757;border:1px solid rgba(255,71,87,0.3);padding:0.75rem 1rem;border-radius:8px;margin-bottom:1rem;">{{ $errors->first() }}</div>
@endif

<form method="GET" class="ad-filters">
    <input type="text" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Search by name or email" class="ad-input" style="min-width:240px;">
    <select name="role" class="ad-input">
        <option value="">All roles</option>
        @foreach($roles as $key => $meta)
            <option value="{{ $key }}" {{ ($filters['role'] ?? '') === $key ? 'selected' : '' }}>{{ $meta['label'] }}</option>
        @endforeach
    </select>
    <button class="ad-btn">Filter</button>
</form>

<table class="ad-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Role</th>
            <th>Status</th>
            <th>Joined</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @forelse($admins as $admin)
            <tr>
                <td><strong>{{ $admin->name }}</strong></td>
                <td>{{ $admin->email }}</td>
                <td><span class="ad-role-pill ad-role-{{ $admin->role }}">{{ $roles[$admin->role]['label'] ?? $admin->role }}</span></td>
                <td>
                    @if($admin->is_active ?? true)
                        <span class="ad-status-active"><i class="fas fa-circle" style="font-size:0.5rem;"></i> Active</span>
                    @else
                        <span class="ad-status-inactive"><i class="fas fa-circle" style="font-size:0.5rem;"></i> Inactive</span>
                    @endif
                </td>
                <td>{{ $admin->created_at->format('M d, Y') }}</td>
                <td>
                    <a href="{{ route('admin.admin-users.show', $admin->id) }}" class="ad-btn" style="padding:0.4rem 0.7rem;font-size:0.78rem;">View</a>
                </td>
            </tr>
        @empty
            <tr><td colspan="6" class="ad-empty"><i class="fas fa-user-shield"></i><div>No admin team members match these filters.</div></td></tr>
        @endforelse
    </tbody>
</table>

<div style="margin-top:1rem;">{{ $admins->links() }}</div>
@endsection