<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
     <?php $__env->slot('header', null, []); ?> 
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold text-gray-900">User Management</h1>
                <p class="text-gray-600 text-sm mt-0.5">Manage admin and receptionist accounts</p>
            </div>
            <a href="<?php echo e(route('users.create')); ?>"
               class="bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold py-2 px-4 rounded-lg transition-all duration-200 flex items-center">
                <svg class="w-5 h-5 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 New User
            </a>
        </div>
     <?php $__env->endSlot(); ?>

    <div class="p-6">
        <div class="max-w-7xl mx-auto">
            <!-- Filters -->
            <div class="bg-white rounded-xl shadow-lg border border-gray-100 mb-6" x-data="userFilters()">
                <div class="p-6">
                    <form method="GET" action="<?php echo e(route('users.index')); ?>" class="grid grid-cols-1 md:grid-cols-4 gap-4">
                        <div>
                            <label for="search" class="block text-sm font-medium text-gray-700 mb-2">Search</label>
                            <input type="text"
                                   name="search"
                                   id="search"
                                   value="<?php echo e($search); ?>"
                                   x-model="filters.search"
                                   @input="debounceSearch()"
                                   placeholder="Search by name or email..."
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        </div>
                        <div>
                            <label for="role" class="block text-sm font-medium text-gray-700 mb-2">Role</label>
                            <select name="role"
                                    id="role"
                                    x-model="filters.role"
                                    @change="applyFilters()"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                <option value="">All Roles</option>
                                <option value="admin" <?php echo e($role === 'admin' ? 'selected' : ''); ?>>Admin</option>
                                <option value="receptionist" <?php echo e($role === 'receptionist' ? 'selected' : ''); ?>>Receptionist</option>
                            </select>
                        </div>
                        <div>
                            <label for="status" class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                            <select name="status"
                                    id="status"
                                    x-model="filters.status"
                                    @change="applyFilters()"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                <option value="">All Status</option>
                                <option value="active" <?php echo e($status === 'active' ? 'selected' : ''); ?>>Active</option>
                                <option value="inactive" <?php echo e($status === 'inactive' ? 'selected' : ''); ?>>Inactive</option>
                            </select>
                        </div>
                        <div class="flex items-end space-x-2">
                            <button type="submit" class="flex-1 bg-gray-600 hover:bg-gray-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
                                Filter
                            </button>
                            <button type="button"
                                    @click="clearFilters()"
                                    class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors duration-200">
                                Clear
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Users Table -->
            <div class="bg-white rounded-xl shadow-lg border border-gray-100">
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-gray-50 border-b border-gray-200">
                            <tr>
                                <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th>
                                <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
                                <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
                                <th class="px-6 py-4 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">
                            <?php $__empty_1 = true; $__currentLoopData = $users; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $user): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                <tr class="hover:bg-gray-50 transition-colors duration-200" x-data="userRow(<?php echo e($user->id); ?>)">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-blue-600 rounded-full flex items-center justify-center text-white font-semibold">
                                                <?php echo e(strtoupper(substr($user->name, 0, 2))); ?>

                                            </div>
                                            <div class="ml-4">
                                                <div class="text-sm font-medium text-gray-900"><?php echo e($user->name); ?></div>
                                                <div class="text-sm text-gray-500"><?php echo e($user->email); ?></div>
                                                <?php if($user->phone): ?>
                                                    <div class="text-xs text-gray-400"><?php echo e($user->phone); ?></div>
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                    </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 <?php echo e($user->role === 'admin' ? 'bg-purple-100 text-purple-800' : 'bg-green-100 text-green-800'); ?>">
                                            <?php echo e(ucfirst($user->role)); ?>

                                        </span>
                                    </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 <?php echo e($user->is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'); ?>">
                                            <?php echo e($user->is_active ? 'Active' : 'Inactive'); ?>

                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        <?php echo e($user->created_at->format('M d, Y')); ?>

                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <div class="flex items-center space-x-2">
                                            <a href="<?php echo e(route('users.show', $user)); ?>"
                                               class="text-blue-600 hover:text-blue-900 transition-colors duration-200">
                                                View
                                            </a>
                                            <a href="<?php echo e(route('users.edit', $user)); ?>"
                                               class="text-indigo-600 hover:text-indigo-900 transition-colors duration-200">
                                                Edit
                                            </a>
                                            <button @click="toggleStatus(<?php echo e($user->is_active ? 'false' : 'true'); ?>)"
                                                    :disabled="loading"
                                                    class="text-yellow-600 hover:text-yellow-900 transition-colors duration-200 disabled:opacity-50">
                                                <span x-show="!loading"><?php echo e($user->is_active ? 'Deactivate' : 'Activate'); ?></span>
                                                <span x-show="loading">Processing...</span>
                                            </button>
                                            <?php if($user->customers()->count() === 0 && $user->orders()->count() === 0): ?>
                                                <button @click="deleteUser()"
                                                        :disabled="loading"
                                                        class="text-red-600 hover:text-red-900 transition-colors duration-200 disabled:opacity-50">
                                                    <span x-show="!loading">Delete</span>
                                                    <span x-show="loading">Deleting...</span>
                                                </button>
                                            <?php endif; ?>
                                        </div>
                                    </td>
                                </tr>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                <tr>
                                    <td colspan="5" class="px-6 py-12 text-center">
                                        <div class="flex flex-col items-center">
                                            <svg class="w-12 h-12 text-gray-400 mb-4" 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>
                                            <h3 class="text-lg font-medium text-gray-900 mb-2">No users found</h3>
                                            <p class="text-gray-500 mb-4">Get started by creating your first user account.</p>
                                            <a href="<?php echo e(route('users.create')); ?>" 
                                               class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200">
                                                Add New User
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>

                <?php if($users->hasPages()): ?>
                    <div class="px-6 py-4 border-t border-gray-200">
                        <?php echo e($users->appends(request()->query())->links()); ?>

                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <script>
        function userFilters() {
            return {
                filters: {
                    search: '<?php echo e($search); ?>',
                    role: '<?php echo e($role); ?>',
                    status: '<?php echo e($status); ?>'
                },
                searchTimeout: null,

                debounceSearch() {
                    clearTimeout(this.searchTimeout);
                    this.searchTimeout = setTimeout(() => {
                        this.applyFilters();
                    }, 500);
                },

                applyFilters() {
                    const params = new URLSearchParams();
                    if (this.filters.search) params.set('search', this.filters.search);
                    if (this.filters.role) params.set('role', this.filters.role);
                    if (this.filters.status) params.set('status', this.filters.status);

                    window.location.href = '<?php echo e(route("users.index")); ?>?' + params.toString();
                },

                clearFilters() {
                    this.filters = { search: '', role: '', status: '' };
                    window.location.href = '<?php echo e(route("users.index")); ?>';
                }
            }
        }

        function userRow(userId) {
            return {
                loading: false,

                async toggleStatus(newStatus) {
                    if (!confirm(`Are you sure you want to ${newStatus ? 'activate' : 'deactivate'} this user?`)) {
                        return;
                    }

                    this.loading = true;
                    try {
                        const response = await fetch(`/users/${userId}/toggle-status`, {
                            method: 'PATCH',
                            headers: {
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                                'Accept': 'application/json',
                                'Content-Type': 'application/json'
                            }
                        });

                        if (response.ok) {
                            window.location.reload();
                        } else {
                            throw new Error('Failed to update user status');
                        }
                    } catch (error) {
                        alert('Error updating user status. Please try again.');
                        console.error('Error:', error);
                    } finally {
                        this.loading = false;
                    }
                },

                async deleteUser() {
                    if (!confirm('Are you sure you want to delete this user? This action cannot be undone.')) {
                        return;
                    }

                    this.loading = true;
                    try {
                        const response = await fetch(`/users/${userId}`, {
                            method: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                                'Accept': 'application/json',
                                'Content-Type': 'application/json'
                            }
                        });

                        if (response.ok) {
                            window.location.reload();
                        } else {
                            const data = await response.json();
                            throw new Error(data.message || 'Failed to delete user');
                        }
                    } catch (error) {
                        alert('Error deleting user: ' + error.message);
                        console.error('Error:', error);
                    } finally {
                        this.loading = false;
                    }
                }
            }
        }
    </script>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php /**PATH C:\xampp\htdocs\slarry\resources\views/users/index.blade.php ENDPATH**/ ?>