@extends('admin.layouts.app')

@section('title', 'Users & Roles')
@section('page-title', 'Users & Roles')
@section('page-subtitle', 'Manage users')

@section('content')
<div class="p-4 lg:p-6">
  <!-- Tabs -->
  <div class="flex items-center gap-3 mb-6 border-b border-slate-200">
    <button onclick="switchTab('users')" id="usersTab" class="tab-btn px-4 py-2 text-sm font-medium border-b-2 border-primary-500 text-primary-600">
      Users
    </button>
    <button onclick="switchTab('roles')" id="rolesTab" class="tab-btn px-4 py-2 text-sm font-medium border-b-2 border-transparent text-slate-600">
      Roles
    </button>
  </div>

  <!-- Users Section -->
  <div id="usersSection">
    <!-- Filter and Actions -->
    <div class="flex flex-wrap items-center justify-between gap-3 mb-6">
      <div class="flex flex-wrap gap-2">
        <a href="{{ route('admin.users.index') }}" class="px-3 py-2 {{ !request('status') ? 'bg-primary-500 text-white' : 'bg-white text-slate-600 border border-slate-200' }} text-xs font-medium rounded-lg">All</a>
        <a href="{{ route('admin.users.index', ['status' => 'active']) }}" class="px-3 py-2 bg-white text-slate-600 text-xs font-medium rounded-lg border border-slate-200">Active</a>
        <a href="{{ route('admin.users.index', ['status' => 'inactive']) }}" class="px-3 py-2 bg-white text-slate-600 text-xs font-medium rounded-lg border border-slate-200">Inactive</a>
      </div>
      <a href="{{ route('admin.users.create') }}" class="px-4 py-2 bg-primary-500 text-white text-xs font-medium rounded-lg shadow-lg shadow-primary-500/30">
        <i class="fas fa-plus mr-2"></i>Add User
      </a>
    </div>

    <!-- Users Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
      @forelse($users as $user)
        <div class="bg-white rounded-xl border border-slate-100 shadow-sm p-4 hover:shadow-md transition">
          <div class="flex items-start justify-between mb-3">
            <img src="{{ $user->avatar ? asset('storage/' . $user->avatar) : 'https://ui-avatars.com/api/?name=' . urlencode($user->name) . '&background=22c55e&color=fff' }}" class="w-12 h-12 rounded-full">
            <span class="px-2 py-0.5 bg-{{ $user->is_active ? 'primary' : 'slate' }}-50 text-{{ $user->is_active ? 'primary' : 'slate' }}-600 text-[10px] font-medium rounded-full">
              {{ $user->is_active ? 'Active' : 'Inactive' }}
            </span>
          </div>
          
          <h3 class="font-bold text-slate-800 text-sm mb-1">{{ $user->name }}</h3>
          <p class="text-xs text-slate-500 mb-2">{{ $user->email }}</p>
          
          <div class="flex items-center gap-2 mb-3">
            @foreach($user->roles as $role)
              <span class="px-2 py-0.5 bg-blue-50 text-blue-600 text-[10px] font-medium rounded-full">
                {{ $role->name }}
              </span>
            @endforeach
          </div>
          
          <div class="text-xs text-slate-500 mb-3">
            <p><i class="fas fa-building w-4 text-slate-400"></i> {{ $user->department }}</p>
            @if($user->phone)
              <p><i class="fas fa-phone w-4 text-slate-400"></i> {{ $user->phone }}</p>
            @endif
          </div>
          
          <div class="flex gap-1 pt-3 border-t border-slate-100">
            <a href="{{ route('admin.users.show', $user) }}" class="flex-1 px-3 py-2 text-center text-slate-600 hover:bg-slate-50 text-xs rounded-lg">
              <i class="fas fa-eye mr-1"></i>View
            </a>
            <a href="{{ route('admin.users.edit', $user) }}" class="flex-1 px-3 py-2 text-center text-primary-600 hover:bg-primary-50 text-xs rounded-lg">
              <i class="fas fa-edit mr-1"></i>Edit
            </a>
          </div>
        </div>
      @empty
        <div class="col-span-full bg-white rounded-xl border border-slate-100 p-8 text-center">
          <i class="fas fa-users text-4xl text-slate-300 mb-3"></i>
          <p class="text-slate-500">No users found</p>
        </div>
      @endforelse
    </div>
    
    <!-- Pagination -->
    @if($users->hasPages())
      <div class="mt-6">
        {{ $users->links() }}
      </div>
    @endif
  </div>

  <!-- Roles Section -->
  <div id="rolesSection" class="hidden">
    <div class="flex justify-end mb-6">
      <a href="{{ route('admin.roles.create') }}" class="px-4 py-2 bg-primary-500 text-white text-xs font-medium rounded-lg shadow-lg shadow-primary-500/30">
        <i class="fas fa-plus mr-2"></i>Add Role
      </a>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      @forelse($roles as $role)
        <div class="bg-white rounded-xl border border-slate-100 shadow-sm p-4">
          <div class="flex items-center justify-between mb-3">
            <div class="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center">
              <i class="fas fa-shield-alt text-primary-600"></i>
            </div>
            <span class="text-xs text-slate-500">{{ $role->users_count }} user{{ $role->users_count != 1 ? 's' : '' }}</span>
          </div>
          
          <h3 class="font-bold text-slate-800 mb-1">{{ $role->name }}</h3>
          @if($role->description)
            <p class="text-xs text-slate-500 mb-3 line-clamp-2">{{ $role->description }}</p>
          @endif
          
          <div class="flex gap-1 pt-3 border-t border-slate-100">
            <a href="{{ route('admin.roles.show', $role) }}" class="flex-1 px-3 py-2 text-center text-slate-600 hover:bg-slate-50 text-xs rounded-lg">
              <i class="fas fa-eye mr-1"></i>View
            </a>
            @if($role->slug !== 'super-admin')
              <a href="{{ route('admin.roles.edit', $role) }}" class="flex-1 px-3 py-2 text-center text-primary-600 hover:bg-primary-50 text-xs rounded-lg">
                <i class="fas fa-edit mr-1"></i>Edit
              </a>
            @endif
          </div>
        </div>
      @empty
        <div class="col-span-full bg-white rounded-xl border border-slate-100 p-8 text-center">
          <i class="fas fa-shield-alt text-4xl text-slate-300 mb-3"></i>
          <p class="text-slate-500">No roles found</p>
        </div>
      @endforelse
    </div>
  </div>
</div>

@push('scripts')
<script>
function switchTab(tab) {
  // Hide all sections
  document.getElementById('usersSection').classList.add('hidden');
  document.getElementById('rolesSection').classList.add('hidden');
  
  // Remove active class from all tabs
  document.querySelectorAll('.tab-btn').forEach(btn => {
    btn.classList.remove('border-primary-500', 'text-primary-600');
    btn.classList.add('border-transparent', 'text-slate-600');
  });
  
  // Show selected section and activate tab
  if (tab === 'users') {
    document.getElementById('usersSection').classList.remove('hidden');
    document.getElementById('usersTab').classList.add('border-primary-500', 'text-primary-600');
    document.getElementById('usersTab').classList.remove('border-transparent', 'text-slate-600');
  } else {
    document.getElementById('rolesSection').classList.remove('hidden');
    document.getElementById('rolesTab').classList.add('border-primary-500', 'text-primary-600');
    document.getElementById('rolesTab').classList.remove('border-transparent', 'text-slate-600');
  }
}
</script>
@endpush
@endsection