@extends('layouts.admin')

@section('title', 'Manage Users')

@section('content')
<div class="space-y-6">
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <h2 class="font-serif text-2xl text-[#0c2340]">Users</h2>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-gray-50/50 border-b border-gray-100 text-xs uppercase tracking-wider text-gray-500 font-semibold">
                        <th class="p-5">User</th>
                        <th class="p-5">Contact</th>
                        <th class="p-5">Bookings</th>
                        <th class="p-5">Joined Date</th>
                        <th class="p-5 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($users as $user)
                        <tr class="hover:bg-gray-50/50 transition-colors">
                            <td class="p-5">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 rounded-full bg-[#0c2340] text-white flex items-center justify-center font-bold text-sm shrink-0">
                                        {{ substr($user->name, 0, 1) }}
                                    </div>
                                    <div>
                                        <div class="font-medium text-[#0c2340]">{{ $user->name }}</div>
                                        @if($user->hasRole('admin'))
                                            <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-[#c9a84c] text-[#0c2340] mt-1">ADMIN</span>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td class="p-5">
                                <div class="text-sm text-gray-600"><a href="mailto:{{ $user->email }}" class="hover:text-blue-600">{{ $user->email }}</a></div>
                                <div class="text-xs text-gray-400 mt-1">{{ $user->phone ?? 'No phone' }}</div>
                            </td>
                            <td class="p-5">
                                <div class="text-sm font-bold text-[#0c2340]">{{ $user->bookings_count ?? 0 }} Total</div>
                                <div class="text-xs text-green-600 font-medium mt-1">{{ $user->confirmed_bookings_count ?? 0 }} Confirmed</div>
                            </td>
                            <td class="p-5">
                                <div class="text-sm text-[#0c2340]">{{ $user->created_at->format('M d, Y') }}</div>
                            </td>
                            <td class="p-5 text-right">
                                <a href="{{ route('admin.users.detail', $user->id) }}" class="inline-flex items-center justify-center p-2 text-gray-400 hover:text-[#c9a84c] hover:bg-yellow-50 rounded-lg transition-colors" title="View Profile">
                                    <i data-feather="eye" class="w-4 h-4"></i>
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="p-8 text-center text-gray-500">
                                <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-gray-100 mb-4">
                                    <i data-feather="users" class="w-6 h-6 text-gray-400"></i>
                                </div>
                                <p>No users found.</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($users->hasPages())
            <div class="p-5 border-t border-gray-100">
                {{ $users->links() }}
            </div>
        @endif
    </div>
</div>
@endsection