@extends('layouts.admin')

@section('title', 'Tenant Details - ' . $tenant->name)

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-6 gap-4">
        <div class="flex items-center">
            <a href="{{ route('admin.tenants.index') }}" 
               class="text-gray-600 hover:text-gray-900 mr-4 p-1 rounded-md hover:bg-gray-100 transition-colors">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                </svg>
            </a>
            <div>
                <h1 class="text-2xl font-bold text-gray-900">{{ $tenant->name }}</h1>
                <p class="text-gray-600 text-sm mt-1">{{ $tenant->slug }} • Created {{ $tenant->created_at->diffForHumans() }}</p>
            </div>
        </div>
        <div class="flex flex-col sm:flex-row gap-2">
            <a href="{{ route('admin.tenants.edit', $tenant) }}" 
               class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center justify-center">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                </svg>
                Edit Tenant
            </a>
            <form action="{{ route('admin.tenants.destroy', $tenant) }}" 
                  method="POST" class="inline"
                  onsubmit="return confirm('Are you sure? This will permanently delete {{ $tenant->name }} and all its data!')">
                @csrf
                @method('DELETE')
                <button type="submit" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center justify-center">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                    </svg>
                    Delete Tenant
                </button>
            </form>
        </div>
    </div>

    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg mb-6 flex items-center">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            {{ session('success') }}
        </div>
    @endif

    @if($errors->any())
        <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">
            <ul class="list-disc list-inside">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="grid grid-cols-1 xl:grid-cols-4 gap-6">
        <!-- Tenant Information -->
        <div class="xl:col-span-3 space-y-6">
            <!-- Basic Info Card -->
            <div class="bg-white shadow-sm rounded-lg border border-gray-200 p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4 flex items-center">
                    <svg class="w-5 h-5 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    Tenant Information
                </h3>
                <dl class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="bg-gray-50 px-4 py-3 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500">Name</dt>
                        <dd class="mt-1 text-sm text-gray-900 font-medium">{{ $tenant->name }}</dd>
                    </div>
                    <div class="bg-gray-50 px-4 py-3 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500">Slug</dt>
                        <dd class="mt-1 text-sm text-gray-900 font-mono">{{ $tenant->slug }}</dd>
                    </div>
                    <div class="bg-gray-50 px-4 py-3 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500">Domain</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            @if($tenant->domain)
                                <a href="http://{{ $tenant->domain }}" target="_blank" class="text-blue-600 hover:text-blue-800">{{ $tenant->domain }}</a>
                            @else
                                <span class="text-gray-400">Not configured</span>
                            @endif
                        </dd>
                    </div>
                    <div class="bg-gray-50 px-4 py-3 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500">Status</dt>
                        <dd class="mt-1">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                @if($tenant->status === 'active') bg-green-100 text-green-800
                                @elseif($tenant->status === 'inactive') bg-yellow-100 text-yellow-800
                                @else bg-red-100 text-red-800 @endif">
                                <svg class="w-1.5 h-1.5 mr-1.5" fill="currentColor" viewBox="0 0 8 8">
                                    <circle cx="4" cy="4" r="3"/>
                                </svg>
                                {{ ucfirst($tenant->status) }}
                            </span>
                        </dd>
                    </div>
                    <div class="bg-gray-50 px-4 py-3 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500">Created</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $tenant->created_at->format('M d, Y g:i A') }}</dd>
                    </div>
                    <div class="bg-gray-50 px-4 py-3 rounded-lg">
                        <dt class="text-sm font-medium text-gray-500">Expires</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            @if($tenant->expires_at)
                                {{ $tenant->expires_at->format('M d, Y') }}
                                <span class="text-xs text-gray-500">({{ $tenant->expires_at->diffForHumans() }})</span>
                            @else
                                <span class="text-gray-400">Never</span>
                            @endif
                        </dd>
                    </div>
                </dl>
            </div>

            <!-- Tenant Users -->
            <div class="bg-white shadow-sm rounded-lg border border-gray-200 p-6">
                <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
                    <h3 class="text-lg font-medium text-gray-900 flex items-center">
                        <svg class="w-5 h-5 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
                        </svg>
                        Tenant Users
                        <span class="ml-2 bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded-full">{{ $tenant->tenantUsers->count() }}</span>
                    </h3>
                    <div class="flex flex-col sm:flex-row gap-2">
                        <button type="button" 
                                id="bulk-delete-btn"
                                onclick="toggleBulkDelete()"
                                class="hidden bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                            </svg>
                            Delete Selected
                        </button>
                        <button type="button" 
                                onclick="document.getElementById('add-admin-modal').classList.remove('hidden')"
                                class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                            </svg>
                            Add Admin
                        </button>
                    </div>
                </div>
                
                @if($tenant->tenantUsers->count() > 0)
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="w-4 px-4 py-3">
                                        <input type="checkbox" 
                                               id="select-all-users"
                                               onchange="toggleAllUsers(this)"
                                               class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
                                    </th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                @foreach($tenant->tenantUsers as $user)
                                    <tr class="hover:bg-gray-50" id="user-row-{{ $user->id }}">
                                        <td class="w-4 px-4 py-3">
                                            @if($user->role !== 'admin' || $tenant->tenantAdminUsers->count() > 1)
                                                <input type="checkbox" 
                                                       name="selected_users[]" 
                                                       value="{{ $user->id }}"
                                                       onchange="updateBulkDeleteButton()"
                                                       class="user-checkbox rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
                                            @endif
                                        </td>
                                        <td class="px-4 py-3 text-sm text-gray-900">
                                            <div class="flex items-center">
                                                <div class="flex-shrink-0 h-8 w-8">
                                                    <div class="h-8 w-8 rounded-full bg-gray-200 flex items-center justify-center">
                                                        <span class="text-gray-600 font-medium text-xs">{{ strtoupper(substr($user->name, 0, 2)) }}</span>
                                                    </div>
                                                </div>
                                                <div class="ml-3">
                                                    <div class="font-medium">{{ $user->name }}</div>
                                                    <div class="text-xs text-gray-500">ID: {{ $user->id }}</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-4 py-3 text-sm text-gray-900">{{ $user->email }}</td>
                                        <td class="px-4 py-3 text-sm">
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                                @if($user->role === 'admin') bg-purple-100 text-purple-800
                                                @elseif($user->role === 'manager') bg-blue-100 text-blue-800
                                                @else bg-gray-100 text-gray-800 @endif">
                                                {{ ucfirst($user->role) }}
                                            </span>
                                        </td>
                                        <td class="px-4 py-3 text-sm">
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                                @if($user->status === 'active') bg-green-100 text-green-800
                                                @elseif($user->status === 'inactive') bg-yellow-100 text-yellow-800
                                                @else bg-red-100 text-red-800 @endif">
                                                <svg class="w-1.5 h-1.5 mr-1.5" fill="currentColor" viewBox="0 0 8 8">
                                                    <circle cx="4" cy="4" r="3"/>
                                                </svg>
                                                {{ ucfirst($user->status) }}
                                            </span>
                                        </td>
                                        <td class="px-4 py-3 text-sm">
                                            <div class="flex items-center space-x-2">
                                                @if($user->role !== 'admin' || $tenant->tenantAdminUsers->count() > 1)
                                                    <button type="button" 
                                                            onclick="confirmDeleteUser('{{ $user->id }}', '{{ $user->name }}', '{{ $tenant->id }}')"
                                                            class="text-red-600 hover:text-red-900 bg-red-50 hover:bg-red-100 px-2 py-1 rounded text-xs transition-colors">
                                                        Delete
                                                    </button>
                                                @else
                                                    <span class="text-gray-400 text-xs">Last Admin</span>
                                                @endif
                                                
                                                <button type="button" 
                                                        onclick="editUserModal('{{ $user->id }}', '{{ $user->name }}', '{{ $user->email }}', '{{ $user->role }}', '{{ $user->status }}')"
                                                        class="text-blue-600 hover:text-blue-900 bg-blue-50 hover:bg-blue-100 px-2 py-1 rounded text-xs transition-colors">
                                                    Edit
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="text-center py-8">
                        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                        <h3 class="mt-2 text-sm font-medium text-gray-900">No users found</h3>
                        <p class="mt-1 text-sm text-gray-500">This tenant doesn't have any users yet.</p>
                        <div class="mt-6">
                            <button type="button" 
                                    onclick="document.getElementById('add-admin-modal').classList.remove('hidden')"
                                    class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                                Add First Admin
                            </button>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        <!-- Stats Sidebar -->
        <div class="xl:col-span-1">
            <div class="bg-white shadow-sm rounded-lg border border-gray-200 p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4 flex items-center">
                    <svg class="w-5 h-5 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                    </svg>
                    Statistics
                </h3>
                <div class="space-y-4">
                    <div class="bg-gradient-to-r from-blue-50 to-blue-100 rounded-lg p-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-blue-900">Total Users</p>
                                <p class="text-2xl font-bold text-blue-900">{{ $stats['total_users_count'] ?? 0 }}</p>
                            </div>
                            <div class="bg-blue-500 rounded-full p-3">
                                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-gradient-to-r from-purple-50 to-purple-100 rounded-lg p-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-purple-900">Admin Users</p>
                                <p class="text-2xl font-bold text-purple-900">{{ $stats['admin_users_count'] ?? 0 }}</p>
                            </div>
                            <div class="bg-purple-500 rounded-full p-3">
                                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-gradient-to-r from-green-50 to-green-100 rounded-lg p-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-green-900">Days Active</p>
                                <p class="text-2xl font-bold text-green-900">{{ $stats['created_days_ago'] ?? 0 }}</p>
                            </div>
                            <div class="bg-green-500 rounded-full p-3">
                                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-gradient-to-r from-gray-50 to-gray-100 rounded-lg p-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-900">Data Storage</p>
                                <p class="text-sm font-bold text-green-600">Single Database</p>
                            </div>
                            <div class="bg-gray-500 rounded-full p-3">
                                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Admin Modal -->
<div id="add-admin-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3 text-center">
            <h3 class="text-lg leading-6 font-medium text-gray-900">Add Tenant Admin</h3>
            <form action="{{ route('admin.tenants.create-admin', $tenant) }}" method="POST" class="mt-4">
                @csrf
                <div class="space-y-4">
                    <div>
                        <input type="text" name="name" placeholder="Admin Name" required
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <input type="email" name="email" placeholder="Admin Email" required
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <input type="password" name="password" placeholder="Password" required
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>
                <div class="flex justify-between mt-6">
                    <button type="button" 
                            onclick="document.getElementById('add-admin-modal').classList.add('hidden')"
                            class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400">
                        Cancel
                    </button>
                    <button type="submit" 
                            class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
                        Add Admin
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Bulk Delete Form (Hidden) -->
<form id="bulk-delete-form" action="{{ route('admin.tenants.bulk-delete-users', $tenant) }}" method="POST" style="display: none;">
    @csrf
    @method('DELETE')
</form>

<!-- Delete User Confirmation Modal -->
<div id="delete-user-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3 text-center">
            <svg class="mx-auto mb-4 w-14 h-14 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.232 15.5c-.77.833.192 2.5 1.732 2.5z"></path>
            </svg>
            <h3 class="text-lg leading-6 font-medium text-gray-900 mb-2">Delete User</h3>
            <p class="text-sm text-gray-500 mb-4">Are you sure you want to delete <span id="delete-user-name" class="font-medium"></span>? This action cannot be undone.</p>
            
            <form id="delete-user-form" method="POST" class="mt-4">
                @csrf
                @method('DELETE')
                <div class="flex justify-between">
                    <button type="button" 
                            onclick="document.getElementById('delete-user-modal').classList.add('hidden')"
                            class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400">
                        Cancel
                    </button>
                    <button type="submit" 
                            class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600">
                        Delete User
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function confirmDeleteUser(userId, userName, tenantId) {
    document.getElementById('delete-user-name').textContent = userName;
    document.getElementById('delete-user-form').action = `/admin/tenants/${tenantId}/users/${userId}`;
    document.getElementById('delete-user-modal').classList.remove('hidden');
}

function editUserModal(userId, userName, userEmail, userRole, userStatus) {
    // This could be expanded to show an edit modal
    // For now, we'll just show an alert
    alert('Edit functionality for ' + userName + ' could be implemented here');
}

function toggleAllUsers(selectAllCheckbox) {
    const userCheckboxes = document.querySelectorAll('.user-checkbox');
    userCheckboxes.forEach(checkbox => {
        if (!checkbox.disabled) {
            checkbox.checked = selectAllCheckbox.checked;
        }
    });
    updateBulkDeleteButton();
}

function updateBulkDeleteButton() {
    const checkedBoxes = document.querySelectorAll('.user-checkbox:checked');
    const bulkDeleteBtn = document.getElementById('bulk-delete-btn');
    
    if (checkedBoxes.length > 0) {
        bulkDeleteBtn.classList.remove('hidden');
        bulkDeleteBtn.textContent = `Delete Selected (${checkedBoxes.length})`;
    } else {
        bulkDeleteBtn.classList.add('hidden');
    }
    
    // Update select all checkbox state
    const allCheckboxes = document.querySelectorAll('.user-checkbox');
    const selectAllCheckbox = document.getElementById('select-all-users');
    const enabledCheckboxes = Array.from(allCheckboxes).filter(cb => !cb.disabled);
    const checkedEnabledBoxes = Array.from(allCheckboxes).filter(cb => cb.checked && !cb.disabled);
    
    if (checkedEnabledBoxes.length === 0) {
        selectAllCheckbox.indeterminate = false;
        selectAllCheckbox.checked = false;
    } else if (checkedEnabledBoxes.length === enabledCheckboxes.length) {
        selectAllCheckbox.indeterminate = false;
        selectAllCheckbox.checked = true;
    } else {
        selectAllCheckbox.indeterminate = true;
    }
}

function toggleBulkDelete() {
    const checkedBoxes = document.querySelectorAll('.user-checkbox:checked');
    
    if (checkedBoxes.length === 0) {
        alert('Please select users to delete.');
        return;
    }
    
    const userNames = Array.from(checkedBoxes).map(cb => {
        const row = cb.closest('tr');
        return row.querySelector('.font-medium').textContent.trim();
    });
    
    const confirmMessage = `Are you sure you want to delete ${checkedBoxes.length} user(s)?\n\nUsers to be deleted:\n${userNames.join('\n')}`;
    
    if (confirm(confirmMessage)) {
        const form = document.getElementById('bulk-delete-form');
        
        // Clear existing inputs
        form.querySelectorAll('input[name="selected_users[]"]').forEach(input => input.remove());
        
        // Add selected user IDs
        checkedBoxes.forEach(checkbox => {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'selected_users[]';
            input.value = checkbox.value;
            form.appendChild(input);
        });
        
        form.submit();
    }
}

// Initialize bulk delete button state
document.addEventListener('DOMContentLoaded', function() {
    updateBulkDeleteButton();
});
</script>
@endsection