@extends('layouts.app')

@section('title', 'Manage Agents - Admin Portal')

@section('content')
<div class="bg-slate-900 text-white py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center">
        <h1 class="font-heading font-extrabold text-2xl">Agents & Advisors Management</h1>
        <a href="{{ route('admin.agents.create') }}" class="px-4 py-2.5 rounded-xl bg-brand-gold text-slate-950 font-bold text-xs">
            + Add New Agent
        </a>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <div class="bg-white rounded-3xl shadow-lg border border-slate-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-sm text-slate-700">
                <thead class="bg-slate-50 text-xs font-bold text-slate-500 uppercase border-b border-slate-100">
                    <tr>
                        <th class="px-6 py-4">Agent Name</th>
                        <th class="px-6 py-4">Title / Role</th>
                        <th class="px-6 py-4">Email</th>
                        <th class="px-6 py-4">Phone / WhatsApp</th>
                        <th class="px-6 py-4">Assigned Listings</th>
                        <th class="px-6 py-4">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @foreach($agents as $agent)
                        <tr class="hover:bg-slate-50">
                            <td class="px-6 py-4 font-bold text-slate-900">
                                <div class="flex items-center space-x-3">
                                    <img src="{{ asset($agent->photo) }}" class="w-10 h-10 rounded-full object-cover">
                                    <span>{{ $agent->name }}</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 text-xs font-semibold text-brand-blue">{{ $agent->title }}</td>
                            <td class="px-6 py-4 text-xs">{{ $agent->email }}</td>
                            <td class="px-6 py-4 text-xs">{{ $agent->phone }}</td>
                            <td class="px-6 py-4 font-bold text-slate-800">{{ $agent->properties_count }} Properties</td>
                            <td class="px-6 py-4">
                                <form action="{{ route('admin.agents.delete', $agent->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this agent?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-xs text-red-600 font-bold hover:underline">Delete</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="p-4 border-t border-slate-100">
            {{ $agents->links() }}
        </div>
    </div>
</div>
@endsection
