@extends('layouts.admin')
@section('header', 'Unassigned Users')
@section('content')
<div class='p-6'>
    <div class='flex justify-between items-center mb-6'>
        <div>
            <h1 class='text-2xl font-semibold text-gray-900 dark:text-white'>Unassigned Users</h1>
            <p class='text-sm text-gray-600 dark:text-gray-400 mt-1'>Users who are not assigned to any events</p>
        </div>
        <a href='{{ route("admin.users.index") }}' class='bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors'>
            Back to All Users
        </a>
    </div>

    @if($users->count() > 0)
        <!-- Assignment Form -->
        <form id="assignmentForm" action="{{ route('admin.users.assign_to_event') }}" method="POST" class="mb-6">
            @csrf
            <x-ui.layout.card>
                <div class="p-4 bg-blue-50 dark:bg-blue-900/20 border-b border-blue-200 dark:border-blue-800">
                    <h3 class="text-lg font-medium text-blue-900 dark:text-blue-100 mb-4">Assign Selected Users to Event</h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label for="client_id" class="block text-sm font-medium text-blue-900 dark:text-blue-100 mb-2">Client</label>
                            <select name="client_id" id="client_id" required class="w-full px-3 py-2 border border-blue-300 dark:border-blue-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                                <option value="">Select a client...</option>
                                @foreach($clients as $client)
                                    <option value="{{ $client->id }}">{{ $client->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        
                        <div>
                            <label for="event_id" class="block text-sm font-medium text-blue-900 dark:text-blue-100 mb-2">Event</label>
                            <select name="event_id" id="event_id" required class="w-full px-3 py-2 border border-blue-300 dark:border-blue-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                                <option value="">Select an event...</option>
                                @foreach($events as $event)
                                    <option value="{{ $event->id }}">{{ $event->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        
                        <div class="flex items-end">
                            <button type="submit" id="assignButton" disabled class="w-full bg-green-600 hover:bg-green-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white px-4 py-2 rounded-lg transition-colors">
                                Assign Selected Users
                            </button>
                        </div>
                    </div>
                    
                    <div class="mt-4">
                        <span id="selectedCount" class="text-sm text-blue-700 dark:text-blue-300">No users selected</span>
                    </div>
                </div>
            </x-ui.layout.card>
        </form>

        <!-- Users Table -->
        <x-ui.layout.card>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead class="bg-gray-50 dark:bg-gray-800">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                <input type="checkbox" id="selectAll" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">ID</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Name</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Email</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Role</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Created</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
                        @foreach ($users as $user)
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                                <td class='px-6 py-4 whitespace-nowrap'>
                                    <input type="checkbox" name="user_ids[]" value="{{ $user->id }}" class="user-checkbox rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                </td>
                                <td class='px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100'>{{ $user->id }}</td>
                                <td class='px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100'>{{ $user->name }}</td>
                                <td class='px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100'>{{ $user->email }}</td>
                                <td class='px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100'>
                                    @if($user->is_admin)
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">Admin</span>
                                    @else
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">User</span>
                                    @endif
                                </td>
                                <td class='px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300'>{{ $user->created_at && $user->created_at instanceof \DateTime ? $user->created_at->format("M d, Y") : "N/A" }}</td>
                                <td class='px-6 py-4 whitespace-nowrap'>
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">
                                        Unassigned
                                    </span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </x-ui.layout.card>
        
        @if(method_exists($users, 'hasPages') && $users->hasPages())
            <div class='mt-6'>
                <x-ui.data.pagination :paginator="$users" />
            </div>
        @endif
    @else
        <!-- No Unassigned Users -->
        <x-ui.layout.card>
            <div class="text-center py-12">
                <div class="mx-auto h-12 w-12 text-gray-400">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-gray-100">No unassigned users</h3>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">All users have been assigned to events.</p>
                <div class="mt-6">
                    <a href="{{ route('admin.users.index') }}" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        View All Users
                    </a>
                </div>
            </div>
        </x-ui.layout.card>
    @endif
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const selectAllCheckbox = document.getElementById('selectAll');
    const userCheckboxes = document.querySelectorAll('.user-checkbox');
    const assignButton = document.getElementById('assignButton');
    const selectedCount = document.getElementById('selectedCount');
    const assignmentForm = document.getElementById('assignmentForm');

    // Handle select all functionality
    selectAllCheckbox.addEventListener('change', function() {
        userCheckboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
        updateSelectedCount();
        updateAssignButton();
    });

    // Handle individual checkbox changes
    userCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            updateSelectAllState();
            updateSelectedCount();
            updateAssignButton();
        });
    });

    // Update select all checkbox state
    function updateSelectAllState() {
        const checkedBoxes = document.querySelectorAll('.user-checkbox:checked');
        selectAllCheckbox.checked = checkedBoxes.length === userCheckboxes.length;
        selectAllCheckbox.indeterminate = checkedBoxes.length > 0 && checkedBoxes.length < userCheckboxes.length;
    }

    // Update selected count display
    function updateSelectedCount() {
        const checkedBoxes = document.querySelectorAll('.user-checkbox:checked');
        const count = checkedBoxes.length;
        
        if (count === 0) {
            selectedCount.textContent = 'No users selected';
        } else if (count === 1) {
            selectedCount.textContent = '1 user selected';
        } else {
            selectedCount.textContent = `${count} users selected`;
        }
    }

    // Update assign button state
    function updateAssignButton() {
        const checkedBoxes = document.querySelectorAll('.user-checkbox:checked');
        const clientSelected = document.getElementById('client_id').value;
        const eventSelected = document.getElementById('event_id').value;
        
        assignButton.disabled = checkedBoxes.length === 0 || !clientSelected || !eventSelected;
    }

    // Handle form field changes
    document.getElementById('client_id').addEventListener('change', updateAssignButton);
    document.getElementById('event_id').addEventListener('change', updateAssignButton);

    // Handle form submission
    assignmentForm.addEventListener('submit', function(e) {
        const checkedBoxes = document.querySelectorAll('.user-checkbox:checked');
        if (checkedBoxes.length === 0) {
            e.preventDefault();
            alert('Please select at least one user to assign.');
            return;
        }

        const clientName = document.getElementById('client_id').selectedOptions[0].text;
        const eventName = document.getElementById('event_id').selectedOptions[0].text;
        const userCount = checkedBoxes.length;
        
        if (!confirm(`Are you sure you want to assign ${userCount} user(s) to "${eventName}" under client "${clientName}"?`)) {
            e.preventDefault();
        }
    });

    // Initial state
    updateSelectedCount();
    updateAssignButton();
});
</script>
@endsection