<x-app-layout>
    <style>
        @media (max-width: 767px) {
            .hide-mobile {
                display: none !important;
            }
        }
        @media (min-width: 768px) {
            .hide-desktop {
                display: none !important;
            }
        }
    </style>
    <div class="flex flex-col md:flex-row md:items-center justify-between mb-6 md:mb-8 gap-3 md:gap-0">
        <div class="flex items-center gap-3 md:gap-4">
            <div class="header-icon-size ios-icon-container shadow-lg flex items-center justify-center">
                <img src="{{ asset('uploads/dashboard-icons/Users&Staf.jpg') }}" alt="Users" class="w-full h-full object-cover">
            </div>
            <div>
                <h2 class="text-xl md:text-2xl font-bold text-slate-800">Staff & Users Registry</h2>
                <p class="text-slate-500 text-sm md:text-sm mt-1">Manage system administrators, property managers, and staff operational accesses.</p>
            </div>
        </div>
        <div>
            <a href="{{ route('users.create') }}" class="inline-flex items-center justify-center py-2.5 px-5 bg-brand-500 hover:bg-brand-600 text-white text-sm font-semibold rounded-xl shadow-sm transition duration-150">
                <svg class="w-4 h-4 mr-2" 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.5" d="M12 4v16m8-8H4"></path>
                </svg>
                Register New User
            </a>
        </div>
    </div>

    <!-- Search Section -->
    <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-5 mb-6 md:mb-8">
        <form action="{{ route('users.index') }}" method="GET" class="flex flex-col md:flex-row gap-3 md:gap-4">
            <div class="flex-1 relative">
                <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-slate-400">
                    <svg class="w-5 h-5" 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.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </span>
                <input type="text" name="search" value="{{ $search }}" placeholder="Search staff by name, email, phone..."
                    class="w-full py-2.5 pl-10 pr-4 bg-white border border-slate-300 focus:border-brand-500 focus:ring-1 focus:ring-brand-500 rounded-xl text-slate-800 placeholder-slate-500 focus:outline-none transition duration-150 text-sm">
            </div>
            
            <div>
                <select name="role" class="w-full md:w-auto py-2.5 px-4 bg-white border border-slate-300 focus:border-brand-500 rounded-xl text-slate-700 text-sm focus:outline-none focus:ring-1 focus:ring-brand-500 transition duration-150">
                    <option value="">All Roles</option>
                    <option value="admin" {{ $role === 'admin' ? 'selected' : '' }}>Admin</option>
                    <option value="manager" {{ $role === 'manager' ? 'selected' : '' }}>Property Manager</option>
                    <option value="accountant" {{ $role === 'accountant' ? 'selected' : '' }}>Accountant</option>
                    <option value="data_entry_manager" {{ $role === 'data_entry_manager' ? 'selected' : '' }}>Data Entry Manager</option>
                </select>
            </div>
 
            <div class="flex gap-2">
                <button type="submit" class="flex-1 md:flex-initial py-2.5 px-6 bg-brand-500 hover:bg-brand-600 text-white font-semibold rounded-xl text-sm transition duration-150 shadow-sm">
                    Search
                </button>
                @if($search || $role)
                    <a href="{{ route('users.index') }}" class="py-2.5 px-4 bg-red-50 hover:bg-red-100 text-red-600 rounded-xl text-sm border border-red-200 transition duration-150 text-center">
                        Clear
                    </a>
                @endif
            </div>
        </form>
    </div>
 
    <!-- Users Registry Listing Container -->
    @if($users->isEmpty())
        <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-12 text-center">
            <h3 class="text-lg font-semibold text-slate-500">No Users Registered</h3>
            <p class="text-slate-500 text-sm mt-1 font-mono">Try searching with other filters.</p>
        </div>
    @else
        <!-- DESKTOP Table View (hide-mobile) -->
        <div class="hide-mobile bg-white border border-slate-200 rounded-xl shadow-sm p-5 mb-8 overflow-x-auto">
            <table class="w-full text-left text-base border-collapse">
                <thead>
                    <tr class="border-b border-slate-200 text-slate-400 text-sm uppercase tracking-wider">
                        <th class="pb-3 font-semibold">User / Staff</th>
                        <th class="pb-3 font-semibold">Role</th>
                        <th class="pb-3 font-semibold">Email</th>
                        <th class="pb-3 font-semibold">Phone / Mobile</th>
                        <th class="pb-3 font-semibold text-center">Status</th>
                        <th class="pb-3 font-semibold text-center">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200">
                    @foreach($users as $user)
                        @php
                            $firstInitial = substr($user->first_name ?: $user->name, 0, 1);
                            $lastInitial = substr($user->last_name, 0, 1);
                            $initials = strtoupper($firstInitial . $lastInitial);
                            
                            $roleBadgeClass = match($user->role) {
                                'admin' => 'bg-rose-50 border-rose-200 text-rose-700',
                                'manager' => 'bg-indigo-50 border-indigo-200 text-indigo-700',
                                'accountant' => 'bg-emerald-50 border-emerald-200 text-emerald-700',
                                'data_entry_manager', 'data-entry-manager' => 'bg-amber-50 border-amber-200 text-amber-700',
                                default => 'bg-slate-50 border-slate-200 text-slate-700',
                            };
                        @endphp
                        <tr class="hover:bg-slate-50">
                            <td class="py-3.5 font-medium text-slate-700">
                                <div class="flex items-center gap-3">
                                    <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-brand-500 to-brand-600 text-white flex items-center justify-center font-bold text-xs uppercase shadow-sm">
                                        {{ $initials }}
                                    </div>
                                    <span class="font-bold text-slate-800">{{ $user->first_name }} {{ $user->last_name }}</span>
                                </div>
                            </td>
                            <td class="py-3.5">
                                <span class="px-2 py-0.5 border text-[10px] font-bold uppercase rounded-md tracking-wider inline-block {{ $roleBadgeClass }}">
                                    {{ str_replace('_', ' ', $user->role) }}
                                </span>
                            </td>
                            <td class="py-3.5">
                                <a href="mailto:{{ $user->email }}" class="text-slate-600 hover:text-brand-600 transition">{{ $user->email }}</a>
                            </td>
                            <td class="py-3.5">
                                @if($user->phone || $user->mobile)
                                    <a href="tel:{{ $user->mobile ?: $user->phone }}" class="text-slate-600 hover:text-brand-600 transition">{{ $user->mobile ?: $user->phone }}</a>
                                @else
                                    <span class="text-slate-400 italic text-sm">No phone</span>
                                @endif
                            </td>
                            <td class="py-3.5 text-center">
                                @if($user->status === 'active')
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700">
                                        <svg class="w-1.5 h-1.5 mr-1 text-emerald-500 fill-current animate-pulse" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3"/></svg>
                                        Active
                                    </span>
                                @else
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-slate-100 text-slate-600">
                                        <svg class="w-1.5 h-1.5 mr-1 text-slate-400 fill-current" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3"/></svg>
                                        Suspended
                                    </span>
                                @endif
                            </td>
                            <td class="py-3.5 text-center">
                                <div class="flex items-center justify-center space-x-3">
                                    <a href="{{ route('users.show', $user->id) }}" class="text-black hover:text-slate-700 text-sm font-semibold">👁 View</a>
                                    <a href="{{ route('users.edit', $user->id) }}" class="text-brand-500 hover:text-brand-600 text-sm font-semibold">✏️ Edit</a>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- MOBILE Cards View (hide-desktop) -->
        <div class="hide-desktop space-y-3 mb-8">
            @foreach($users as $user)
                @php
                    $firstInitial = substr($user->first_name ?: $user->name, 0, 1);
                    $lastInitial = substr($user->last_name, 0, 1);
                    $initials = strtoupper($firstInitial . $lastInitial);
                    
                    $roleBadgeClass = match($user->role) {
                        'admin' => 'bg-rose-50 border-rose-200 text-rose-700',
                        'manager' => 'bg-indigo-50 border-indigo-200 text-indigo-700',
                        'accountant' => 'bg-emerald-50 border-emerald-200 text-emerald-700',
                        'data_entry_manager', 'data-entry-manager' => 'bg-amber-50 border-amber-200 text-amber-700',
                        default => 'bg-slate-50 border-slate-200 text-slate-700',
                    };
                @endphp
                <div class="bg-white border border-slate-200 rounded-2xl p-4 shadow-sm relative overflow-hidden transition duration-150 active:scale-[0.98]">
                    <!-- Left Accent Bar -->
                    <div class="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-brand-500 to-brand-600"></div>
                    
                    <!-- Top Section: Avatar + Name + Role AND Status on Right Side -->
                    <div class="flex justify-between items-start mb-3 gap-2">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-brand-600 text-white flex items-center justify-center font-bold text-sm uppercase shadow-sm">
                                {{ $initials }}
                            </div>
                            <div>
                                <h3 class="font-bold text-slate-800 text-sm">
                                    {{ $user->first_name }} {{ $user->last_name }}
                                </h3>
                                <span class="px-2 py-0.5 mt-0.5 border text-[10px] font-bold uppercase rounded-md tracking-wider inline-block {{ $roleBadgeClass }}">
                                    {{ str_replace('_', ' ', $user->role) }}
                                </span>
                            </div>
                        </div>

                        <!-- Status badge on the right side of the card -->
                        <div>
                            @if($user->status === 'active')
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700 border border-emerald-200">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 mr-1.5 animate-pulse"></span>
                                    Active
                                </span>
                            @else
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-slate-100 text-slate-600 border border-slate-200">
                                    <span class="w-1.5 h-1.5 rounded-full bg-slate-400 mr-1.5"></span>
                                    Suspended
                                </span>
                            @endif
                        </div>
                    </div>

                    <!-- Contact Details -->
                    <div class="space-y-1.5 py-3 border-t border-slate-100 text-slate-500 text-xs">
                        <div class="flex items-center gap-2">
                            <svg class="w-3.5 h-3.5 text-slate-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                            <a href="mailto:{{ $user->email }}" class="text-slate-600 hover:text-brand-600 transition truncate block">{{ $user->email }}</a>
                        </div>
                        <div class="flex items-center gap-2">
                            <svg class="w-3.5 h-3.5 text-slate-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                            @if($user->phone || $user->mobile)
                                <a href="tel:{{ $user->mobile ?: $user->phone }}" class="text-slate-600 hover:text-brand-600 transition">{{ $user->mobile ?: $user->phone }}</a>
                            @else
                                <span class="text-slate-400 italic">No phone listed</span>
                            @endif
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="flex gap-2 pt-3 border-t border-slate-100">
                        <a href="{{ route('users.show', $user->id) }}" class="flex-1 py-2 px-3 bg-slate-50 border border-slate-200 text-slate-700 hover:bg-slate-100 text-center font-semibold rounded-xl text-xs transition duration-150">
                            👁 View Profile
                        </a>
                        <a href="{{ route('users.edit', $user->id) }}" class="flex-1 py-2 px-3 bg-brand-50 border border-brand-200 text-brand-700 hover:bg-brand-100 text-center font-semibold rounded-xl text-xs transition duration-150">
                            ✏️ Edit User
                        </a>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="mb-8">
            {{ $users->links() }}
        </div>
    @endif
</x-app-layout>
