@extends('layouts.admin')

@section('title', 'User Management - Admin')
@section('page-title', 'User Management')
@section('page-description', 'Manage all platform users')

@section('content')
<div class="space-y-6">
    
    <!-- Add User Button -->
    <div class="flex justify-end">
        <a href="{{ route('admin.users.create') }}" class="px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg text-white font-semibold hover:shadow-2xl transition hover:scale-105">
            <i class="fas fa-plus mr-2"></i>Add New User
        </a>
    </div>
    
    <!-- Stats -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div class="glass-card rounded-2xl p-6 border border-white/10 hover:shadow-2xl hover:shadow-purple-500/20 transition-all duration-300">
            <div class="flex justify-between items-center">
                <div>
                    <p class="text-gray-400">Total Users</p>
                    <h3 class="text-2xl font-bold text-white">1,247</h3>
                </div>
                <i class="fas fa-users text-3xl text-purple-400"></i>
            </div>
        </div>
        <div class="glass-card rounded-2xl p-6 border border-white/10 hover:shadow-2xl hover:shadow-purple-500/20 transition-all duration-300">
            <div class="flex justify-between items-center">
                <div>
                    <p class="text-gray-400">Active Users</p>
                    <h3 class="text-2xl font-bold text-green-400">892</h3>
                </div>
                <i class="fas fa-user-check text-3xl text-green-400"></i>
            </div>
        </div>
        <div class="glass-card rounded-2xl p-6 border border-white/10 hover:shadow-2xl hover:shadow-purple-500/20 transition-all duration-300">
            <div class="flex justify-between items-center">
                <div>
                    <p class="text-gray-400">Suspended</p>
                    <h3 class="text-2xl font-bold text-red-400">23</h3>
                </div>
                <i class="fas fa-user-slash text-3xl text-red-400"></i>
            </div>
        </div>
        <div class="glass-card rounded-2xl p-6 border border-white/10 hover:shadow-2xl hover:shadow-purple-500/20 transition-all duration-300">
            <div class="flex justify-between items-center">
                <div>
                    <p class="text-gray-400">New This Month</p>
                    <h3 class="text-2xl font-bold text-blue-400">156</h3>
                </div>
                <i class="fas fa-user-plus text-3xl text-blue-400"></i>
            </div>
        </div>
    </div>

    <!-- Search & Filters -->
    <div class="glass-card rounded-2xl p-6 border border-white/10">
        <div class="flex flex-wrap gap-4 justify-between items-center">
            <div class="flex-1 relative">
                <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                <input type="text" id="searchInput" placeholder="Search users by name or email..." class="w-full pl-10 pr-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition">
            </div>
            <div class="flex gap-3">
                <select id="roleFilter" class="px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500">
                    <option>All Roles</option>
                    <option>Couple</option>
                    <option>Admin</option>
                </select>
                <select id="statusFilter" class="px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500">
                    <option>All Status</option>
                    <option>Active</option>
                    <option>Suspended</option>
                </select>
                <button onclick="applyFilters()" class="px-4 py-2 bg-purple-600 rounded-lg text-white hover:bg-purple-700 transition">
                    <i class="fas fa-filter mr-2"></i>Apply Filters
                </button>
                <button onclick="resetFilters()" class="px-4 py-2 bg-white/10 rounded-lg text-gray-300 hover:bg-white/20 transition">
                    <i class="fas fa-redo mr-2"></i>Reset
                </button>
            </div>
        </div>
    </div>

    <!-- Users Table -->
    <div class="glass-card rounded-2xl p-6 border border-white/10 overflow-x-auto">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-semibold text-white">All Users</h3>
            <div class="flex gap-2">
                <button onclick="exportUsers()" class="px-3 py-1 bg-white/10 rounded text-gray-300 text-sm hover:bg-white/20 transition">
                    <i class="fas fa-download mr-1"></i>Export CSV
                </button>
                <button onclick="window.print()" class="px-3 py-1 bg-white/10 rounded text-gray-300 text-sm hover:bg-white/20 transition">
                    <i class="fas fa-print mr-1"></i>Print
                </button>
            </div>
        </div>
        
        <table class="w-full" id="usersTable">
            <thead>
                <tr class="border-b border-white/10">
                    <th class="text-left py-3 px-2 text-gray-400">User</th>
                    <th class="text-left py-3 px-2 text-gray-400">Email</th>
                    <th class="text-left py-3 px-2 text-gray-400">Role</th>
                    <th class="text-left py-3 px-2 text-gray-400">Wedding</th>
                    <th class="text-left py-3 px-2 text-gray-400">Joined</th>
                    <th class="text-left py-3 px-2 text-gray-400">Status</th>
                    <th class="text-left py-3 px-2 text-gray-400">Actions</th>
                  </tr>
            </thead>
            <tbody>
                <tr class="hover:bg-white/5 transition">
                    <td class="py-3 px-2">
                        <div class="flex items-center gap-3">
                            <img src="https://ui-avatars.com/api/?background=8B5CF6&color=fff&name=Emma+Thompson" class="w-10 h-10 rounded-full">
                            <div>
                                <p class="text-white font-semibold">Emma Thompson</p>
                                <p class="text-gray-400 text-xs">ID: USR-001</p>
                            </div>
                        </div>
                      </td>
                    <td class="py-3 px-2 text-gray-300">emma@example.com</td>
                    <td class="py-3 px-2"><span class="badge badge-info">Couple</span></td>
                    <td class="py-3 px-2 text-gray-300">Emma & James</td>
                    <td class="py-3 px-2 text-gray-300">Jan 15, 2024</td>
                    <td class="py-3 px-2"><span class="badge badge-success">Active</span></td>
                    <td class="py-3 px-2">
                        <div class="flex gap-2">
                            <a href="{{ route('admin.users.show', 1) }}" class="text-purple-400 hover:text-purple-300 transition" title="View">
                                <i class="fas fa-eye"></i>
                            </a>
                            <a href="{{ route('admin.users.edit', 1) }}" class="text-blue-400 hover:text-blue-300 transition" title="Edit">
                                <i class="fas fa-edit"></i>
                            </a>
                            <button onclick="suspendUser(1)" class="text-yellow-400 hover:text-yellow-300 transition" title="Suspend">
                                <i class="fas fa-ban"></i>
                            </button>
                            <button onclick="deleteUser(1)" class="text-red-400 hover:text-red-300 transition" title="Delete">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                <tr class="hover:bg-white/5 transition">
                    <td class="py-3 px-2">
                        <div class="flex items-center gap-3">
                            <img src="https://ui-avatars.com/api/?background=8B5CF6&color=fff&name=James+Wilson" class="w-10 h-10 rounded-full">
                            <div>
                                <p class="text-white font-semibold">James Wilson</p>
                                <p class="text-gray-400 text-xs">ID: USR-002</p>
                            </div>
                        </div>
                      </td>
                    <td class="py-3 px-2 text-gray-300">james@example.com</td>
                    <td class="py-3 px-2"><span class="badge badge-info">Couple</span></td>
                    <td class="py-3 px-2 text-gray-300">James & Emma</td>
                    <td class="py-3 px-2 text-gray-300">Jan 20, 2024</td>
                    <td class="py-3 px-2"><span class="badge badge-success">Active</span></td>
                    <td class="py-3 px-2">
                        <div class="flex gap-2">
                            <a href="{{ route('admin.users.show', 2) }}" class="text-purple-400 hover:text-purple-300 transition"><i class="fas fa-eye"></i></a>
                            <a href="{{ route('admin.users.edit', 2) }}" class="text-blue-400 hover:text-blue-300 transition"><i class="fas fa-edit"></i></a>
                            <button onclick="suspendUser(2)" class="text-yellow-400 hover:text-yellow-300 transition"><i class="fas fa-ban"></i></button>
                            <button onclick="deleteUser(2)" class="text-red-400 hover:text-red-300 transition"><i class="fas fa-trash"></i></button>
                        </div>
                    </td>
                </tr>
                <tr class="hover:bg-white/5 transition">
                    <td class="py-3 px-2">
                        <div class="flex items-center gap-3">
                            <img src="https://ui-avatars.com/api/?background=8B5CF6&color=fff&name=Sarah+Johnson" class="w-10 h-10 rounded-full">
                            <div>
                                <p class="text-white font-semibold">Sarah Johnson</p>
                                <p class="text-gray-400 text-xs">ID: USR-003</p>
                            </div>
                        </div>
                      </td>
                    <td class="py-3 px-2 text-gray-300">sarah@example.com</td>
                    <td class="py-3 px-2"><span class="badge badge-info">Couple</span></td>
                    <td class="py-3 px-2 text-gray-300">Sarah & Michael</td>
                    <td class="py-3 px-2 text-gray-300">Feb 10, 2024</td>
                    <td class="py-3 px-2"><span class="badge badge-warning">Suspended</span></td>
                    <td class="py-3 px-2">
                        <div class="flex gap-2">
                            <a href="{{ route('admin.users.show', 3) }}" class="text-purple-400 hover:text-purple-300 transition"><i class="fas fa-eye"></i></a>
                            <a href="{{ route('admin.users.edit', 3) }}" class="text-blue-400 hover:text-blue-300 transition"><i class="fas fa-edit"></i></a>
                            <button onclick="activateUser(3)" class="text-green-400 hover:text-green-300 transition" title="Activate">
                                <i class="fas fa-check-circle"></i>
                            </button>
                            <button onclick="deleteUser(3)" class="text-red-400 hover:text-red-300 transition"><i class="fas fa-trash"></i></button>
                        </div>
                    </td>
                </tr>
                <tr class="hover:bg-white/5 transition">
                    <td class="py-3 px-2">
                        <div class="flex items-center gap-3">
                            <img src="https://ui-avatars.com/api/?background=8B5CF6&color=fff&name=Admin+User" class="w-10 h-10 rounded-full">
                            <div>
                                <p class="text-white font-semibold">Admin User</p>
                                <p class="text-gray-400 text-xs">ID: USR-004</p>
                            </div>
                        </div>
                      </td>
                    <td class="py-3 px-2 text-gray-300">admin@wedbooker.com</td>
                    <td class="py-3 px-2"><span class="badge badge-success">Admin</span></td>
                    <td class="py-3 px-2 text-gray-300">—</td>
                    <td class="py-3 px-2 text-gray-300">Jan 01, 2024</td>
                    <td class="py-3 px-2"><span class="badge badge-success">Active</span></td>
                    <td class="py-3 px-2">
                        <div class="flex gap-2">
                            <a href="{{ route('admin.users.show', 4) }}" class="text-purple-400 hover:text-purple-300 transition"><i class="fas fa-eye"></i></a>
                            <a href="{{ route('admin.users.edit', 4) }}" class="text-blue-400 hover:text-blue-300 transition"><i class="fas fa-edit"></i></a>
                            <button onclick="deleteUser(4)" class="text-red-400 hover:text-red-300 transition"><i class="fas fa-trash"></i></button>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>

        <!-- Pagination -->
        <div class="flex flex-wrap justify-between items-center mt-6 pt-4 border-t border-white/10 gap-4">
            <p class="text-gray-400 text-sm">Showing 1-4 of 1,247 users</p>
            <div class="flex gap-2">
                <button class="px-3 py-1 bg-white/10 rounded text-gray-400 hover:bg-white/20 transition">Previous</button>
                <button class="px-3 py-1 bg-purple-600 rounded text-white">1</button>
                <button class="px-3 py-1 bg-white/10 rounded text-gray-400 hover:bg-white/20 transition">2</button>
                <button class="px-3 py-1 bg-white/10 rounded text-gray-400 hover:bg-white/20 transition">3</button>
                <button class="px-3 py-1 bg-white/10 rounded text-gray-400 hover:bg-white/20 transition">Next</button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Create form for POST requests (for suspend/activate/delete)
    function submitForm(action, method = 'POST') {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = action;
        form.style.display = 'none';
        
        // Add CSRF token
        const csrfToken = document.createElement('input');
        csrfToken.type = 'hidden';
        csrfToken.name = '_token';
        csrfToken.value = '{{ csrf_token() }}';
        form.appendChild(csrfToken);
        
        // Add method spoofing for PUT/DELETE
        if (method !== 'POST') {
            const methodField = document.createElement('input');
            methodField.type = 'hidden';
            methodField.name = '_method';
            methodField.value = method;
            form.appendChild(methodField);
        }
        
        document.body.appendChild(form);
        form.submit();
    }
    
    function suspendUser(userId) {
        if(confirm('Are you sure you want to suspend this user?')) {
            submitForm('{{ url("admin/users") }}/' + userId + '/suspend', 'POST');
        }
    }
    
    function activateUser(userId) {
        if(confirm('Are you sure you want to activate this user?')) {
            submitForm('{{ url("admin/users") }}/' + userId + '/activate', 'POST');
        }
    }
    
    function deleteUser(userId) {
        if(confirm('Are you sure you want to delete this user? This action cannot be undone.')) {
            submitForm('{{ url("admin/users") }}/' + userId, 'DELETE');
        }
    }
    
    function applyFilters() {
        const search = document.getElementById('searchInput').value;
        const role = document.getElementById('roleFilter').value;
        const status = document.getElementById('statusFilter').value;
        
        // For now, just reload with filters (in real app, you'd make an AJAX call)
        window.location.href = '{{ route("admin.users.index") }}?search=' + search + '&role=' + role + '&status=' + status;
    }
    
    function resetFilters() {
        document.getElementById('searchInput').value = '';
        document.getElementById('roleFilter').value = 'All Roles';
        document.getElementById('statusFilter').value = 'All Status';
        window.location.href = '{{ route("admin.users.index") }}';
    }
    
    function exportUsers() {
        window.location.href = '{{ route("admin.users.index") }}?export=csv';
    }
</script>
@endpush
@endsection