@extends('layouts.app')

@section('title', 'Manage Users - Lingel DAM')
@section('page_header', 'Manage System Users')

@section('content')
    <div class="bg-white p-6 rounded-lg shadow-sm mb-6 border border-gray-200">
        <h3 class="text-lg font-bold mb-4 text-gray-800">Create New User</h3>
        <form action="{{ route('admin.users.store') }}" method="POST" class="grid grid-cols-1 md:grid-cols-4 gap-4">
            @csrf
            <div><input type="text" name="name" placeholder="Full Name" required class="w-full px-4 py-2 border rounded focus:outline-none focus:border-blue-500"></div>
            <div><input type="email" name="email" placeholder="Email Address" required class="w-full px-4 py-2 border rounded focus:outline-none focus:border-blue-500"></div>
            <div><input type="password" name="password" placeholder="Password (Min 6 chars)" required class="w-full px-4 py-2 border rounded focus:outline-none focus:border-blue-500"></div>
            <div class="flex gap-2">
                <select name="role" required class="w-full px-4 py-2 border rounded focus:outline-none focus:border-blue-500 bg-white">
                    <option value="viewer">Viewer (Sales)</option>
                    <option value="uploader">Uploader</option>
                    <option value="super_admin">Super Admin</option>
                </select>
                <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded font-medium hover:bg-blue-700 transition">
                    <i class="fas fa-plus"></i>
                </button>
            </div>
        </form>
    </div>

    <div class="mb-4 flex justify-between items-center">
        <h3 class="text-lg font-bold text-gray-800">User List</h3>
        <div class="relative w-64">
            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                <i class="fas fa-search"></i>
            </span>
            <input type="text" id="searchInput" onkeyup="filterUsers()" placeholder="Search by name or email..." class="w-full pl-10 pr-4 py-2 border rounded-full focus:outline-none focus:border-blue-500 shadow-sm text-sm">
        </div>
    </div>

    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
        <table class="w-full text-left" id="usersTable">
            <thead class="bg-gray-50 border-b">
                <tr>
                    <th class="px-6 py-4 text-gray-600 font-semibold">Name</th>
                    <th class="px-6 py-4 text-gray-600 font-semibold">Email</th>
                    <th class="px-6 py-4 text-gray-600 font-semibold">Role</th>
                    <th class="px-6 py-4 text-gray-600 font-semibold text-right">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($users as $user)
                <tr class="border-b hover:bg-gray-50 transition user-row">
                    <td class="px-6 py-4 font-medium text-gray-800 user-name">
                        {{ $user->name }}
                        @if(auth()->id() == $user->id)
                            <span class="ml-2 text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full">You</span>
                        @endif
                    </td>
                    <td class="px-6 py-4 text-gray-500 user-email">{{ $user->email }}</td>
                    <td class="px-6 py-4">
                        @if($user->role == 'super_admin')
                            <span class="text-xs bg-red-100 text-red-700 px-2 py-1 rounded-full font-bold">Super Admin</span>
                        @elseif($user->role == 'uploader')
                            <span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full font-bold">Uploader</span>
                        @else
                            <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded-full font-bold">Viewer</span>
                        @endif
                    </td>
                    <td class="px-6 py-4 text-right">
                        <button onclick="openEditModal({{ $user->id }}, '{{ $user->name }}', '{{ $user->email }}', '{{ $user->role }}')" class="text-blue-500 hover:text-blue-700 mr-4 transition">
                            <i class="fas fa-edit"></i> Edit
                        </button>

                        @if(auth()->id() != $user->id)
                        <form action="{{ route('admin.users.destroy', $user->id) }}" method="POST" class="inline-block">
                            @csrf @method('DELETE')
                            <button type="submit" class="text-red-500 hover:text-red-700 transition" onclick="return confirm('Are you sure you want to remove this user account?')">
                                <i class="fas fa-trash"></i> Delete
                            </button>
                        </form>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <div id="editModal" class="hidden fixed inset-0 bg-gray-900 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center z-50">
        <div class="bg-white p-6 rounded-lg shadow-xl w-full max-w-md">
            <h3 class="text-xl font-bold mb-4 text-gray-800">Edit User Details</h3>
            <form id="editForm" method="POST">
                @csrf @method('PUT')
                
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2">Full Name</label>
                    <input type="text" id="editName" name="name" class="w-full px-4 py-2 border rounded focus:outline-none focus:border-blue-500" required>
                </div>

                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2">Email</label>
                    <input type="email" id="editEmail" name="email" class="w-full px-4 py-2 border rounded focus:outline-none focus:border-blue-500" required>
                </div>

                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2">Role</label>
                    <select id="editRole" name="role" class="w-full px-4 py-2 border rounded focus:outline-none focus:border-blue-500 bg-white" required>
                        <option value="viewer">Viewer (Sales)</option>
                        <option value="uploader">Uploader</option>
                        <option value="super_admin">Super Admin</option>
                    </select>
                </div>

                <div class="mb-6">
                    <label class="block text-gray-700 text-sm font-bold mb-2">New Password <span class="text-xs text-gray-400 font-normal">(Leave blank to keep current)</span></label>
                    <input type="password" name="password" placeholder="••••••••" class="w-full px-4 py-2 border rounded focus:outline-none focus:border-blue-500">
                </div>

                <div class="flex justify-end gap-3">
                    <button type="button" onclick="closeModal()" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded transition">Cancel</button>
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded transition">Save Changes</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // Modal Logic
        function openEditModal(id, name, email, role) {
            document.getElementById('editForm').action = '/admin/users/' + id;
            document.getElementById('editName').value = name;
            document.getElementById('editEmail').value = email;
            document.getElementById('editRole').value = role;
            document.getElementById('editModal').classList.remove('hidden');
        }

        function closeModal() {
            document.getElementById('editModal').classList.add('hidden');
        }

        // Live Search Filter Logic
        function filterUsers() {
            let input = document.getElementById('searchInput').value.toLowerCase();
            let rows = document.querySelectorAll('.user-row');

            rows.forEach(row => {
                let name = row.querySelector('.user-name').innerText.toLowerCase();
                let email = row.querySelector('.user-email').innerText.toLowerCase();
                
                if (name.includes(input) || email.includes(input)) {
                    row.style.display = "";
                } else {
                    row.style.display = "none";
                }
            });
        }
    </script>
@endsection