@extends("layouts.app")

@section("title", __("User Management"))

@section("header")
<div class="flex justify-between items-center">
    <h2 class="font-semibold text-xl text-gray-800 leading-tight">
        {{ __("User Management") }}
    </h2>
</div>
@endsection

@section("content")
<div class="py-6">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        @if(session("success"))
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg mb-6">
                {{ session("success") }}
            </div>
        @endif

        @if(session("info"))
            <div class="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded-lg mb-6">
                {{ session("info") }}
            </div>
        @endif

        <!-- Stats Cards -->
        <div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-6">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
                <p class="text-xs font-medium text-gray-500">{{ __("Total") }}</p>
                <p class="text-2xl font-bold text-gray-900">{{ $stats["total"] }}</p>
            </div>
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
                <p class="text-xs font-medium text-gray-500">{{ __("Pending") }}</p>
                <p class="text-2xl font-bold text-yellow-600">{{ $stats["pending"] }}</p>
            </div>
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
                <p class="text-xs font-medium text-gray-500">{{ __("Active") }}</p>
                <p class="text-2xl font-bold text-green-600">{{ $stats["active"] }}</p>
            </div>
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
                <p class="text-xs font-medium text-gray-500">{{ __("Paused") }}</p>
                <p class="text-2xl font-bold text-red-600">{{ $stats["paused"] }}</p>
            </div>
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
                <p class="text-xs font-medium text-gray-500">{{ __("Unverified") }}</p>
                <p class="text-2xl font-bold text-orange-600">{{ $stats["unverified"] }}</p>
            </div>
        </div>

        <!-- Filters -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 mb-6">
            <form method="GET" class="flex flex-wrap gap-3 items-center">
                <div class="flex-1 min-w-[200px]">
                    <input type="text" name="search" value="{{ request('search') }}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 text-sm"
                           placeholder="{{ __("Search by name or email...") }}">
                </div>
                <select name="status" class="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 text-sm">
                    <option value="">{{ __("All Status") }}</option>
                    <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>{{ __("Pending") }}</option>
                    <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>{{ __("Approved") }}</option>
                    <option value="paused" {{ request('status') == 'paused' ? 'selected' : '' }}>{{ __("Paused") }}</option>
                    <option value="verified" {{ request('status') == 'verified' ? 'selected' : '' }}>{{ __("Verified") }}</option>
                    <option value="unverified" {{ request('status') == 'unverified' ? 'selected' : '' }}>{{ __("Unverified") }}</option>
                </select>
                <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition text-sm font-medium">
                    {{ __("Filter") }}
                </button>
                @if(request('search') || request('status'))
                    <a href="{{ route("superadmin.users.index") }}" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition text-sm font-medium">
                        {{ __("Clear") }}
                    </a>
                @endif
            </form>
        </div>

        <!-- Users Table -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ __("User") }}</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ __("Role") }}</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ __("Status") }}</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ __("Email Verified") }}</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ __("Joined") }}</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{{ __("Actions") }}</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse($users as $user)
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <span class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-xs font-bold text-indigo-600 mr-3">
                                            {{ substr($user->name, 0, 1) }}
                                        </span>
                                        <div>
                                            <p class="text-sm font-medium text-gray-900">{{ $user->name }}</p>
                                            <p class="text-xs text-gray-500">{{ $user->email }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $user->hasRole('superadmin') ? 'bg-purple-100 text-purple-800' : 'bg-indigo-100 text-indigo-800' }}">
                                        {{ $user->getRoleNames()->first() ?? __('admin') }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex flex-col gap-1">
                                        @if($user->is_approved && $user->is_active)
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                                {{ __("Active") }}
                                            </span>
                                        @elseif(!$user->is_approved)
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                                {{ __("Pending") }}
                                            </span>
                                        @elseif(!$user->is_active)
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                                {{ __("Paused") }}
                                            </span>
                                        @endif
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    @if($user->hasVerifiedEmail())
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                            {{ __("Verified") }}
                                        </span>
                                    @else
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-orange-100 text-orange-800">
                                            {{ __("Unverified") }}
                                        </span>
                                    @endif
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ $user->created_at->format('d/m/Y') }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm">
                                    <div class="flex flex-col gap-1">
                                        <div class="flex gap-1 flex-wrap">
                                            @if(!$user->is_approved)
                                                <form action="{{ route("superadmin.users.approve", $user) }}" method="POST" class="inline">
                                                    @csrf
                                                    <button type="submit" class="px-2 py-1 bg-green-600 text-white text-xs rounded hover:bg-green-700">
                                                        {{ __("Approve") }}
                                                    </button>
                                                </form>
                                            @endif
                                            @if(!$user->hasVerifiedEmail())
                                                <form action="{{ route("superadmin.users.verify-email", $user) }}" method="POST" class="inline">
                                                    @csrf
                                                    <button type="submit" class="px-2 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700">
                                                        {{ __("Verify Email") }}
                                                    </button>
                                                </form>
                                            @endif
                                            <form action="{{ route("superadmin.users.toggle-active", $user) }}" method="POST" class="inline">
                                                @csrf
                                                <button type="submit" class="px-2 py-1 {{ $user->is_active ? 'bg-red-600 hover:bg-red-700' : 'bg-green-600 hover:bg-green-700' }} text-white text-xs rounded">
                                                    {{ $user->is_active ? __("Pause") : __("Activate") }}
                                                </button>
                                            </form>
                                            <a href="{{ route("superadmin.users.edit", $user) }}"
                                               class="px-2 py-1 bg-indigo-600 text-white text-xs rounded hover:bg-indigo-700 inline-block">
                                                {{ __("Edit") }}
                                            </a>
                                            <form action="{{ route("superadmin.users.destroy", $user) }}" method="POST" class="inline"
                                                  onsubmit="return confirm('{{ __("Delete this user? All associated data will be permanently removed.") }}')">
                                                @csrf
                                                @method("DELETE")
                                                <button type="submit" class="px-2 py-1 bg-red-600 text-white text-xs rounded hover:bg-red-700">
                                                    {{ __("Delete") }}
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-6 py-12 text-center text-gray-500">
                                    {{ __("No users found.") }}
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if(method_exists($users, 'links'))
                <div class="p-4 border-t border-gray-100">
                    {{ $users->links() }}
                </div>
            @endif
        </div>
    </div>
</div>
@endsection