@extends('layouts.dashboard.inface', ['section' => 'agents'])

@section('content')
    <div class="flex-1 overflow-y-auto">
        <div class="mx-auto flex w-full max-w-7xl flex-col gap-6 p-6 md:p-8">
            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <h1 class="text-2xl font-bold tracking-tight text-slate-900 dark:text-white">Asignar inmobiliarias</h1>
                    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
                        Vincula los agentes existentes con la inmobiliaria que les corresponde.
                    </p>
                </div>
                <a href="{{ route('realEstate.agents') }}"
                    class="inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-4 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-800 dark:text-slate-200">
                    <span class="material-symbols-outlined" style="font-size: 18px;">arrow_back</span>
                    Volver
                </a>
            </div>

            @if (session('success'))
                <div class="rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">
                    {{ session('success') }}
                </div>
            @endif

            @if ($errors->any())
                <div class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
                    No fue posible guardar la asignación. Verifica la inmobiliaria seleccionada.
                </div>
            @endif

            <div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-[#151b2b]">
                <div class="overflow-x-auto">
                    <table class="w-full text-left">
                        <thead class="border-b border-gray-200 bg-gray-50/50 dark:border-gray-800 dark:bg-slate-800/50">
                            <tr>
                                <th class="px-6 py-4 text-xs font-semibold uppercase tracking-wider text-slate-500">Agente</th>
                                <th class="px-6 py-4 text-xs font-semibold uppercase tracking-wider text-slate-500">Asignaciones actuales</th>
                                <th class="px-6 py-4 text-xs font-semibold uppercase tracking-wider text-slate-500">Vincular con</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 dark:divide-gray-800">
                            @forelse ($agents as $agent)
                                <tr>
                                    <td class="px-6 py-4">
                                        <div class="font-semibold text-slate-900 dark:text-white">
                                            {{ trim($agent->first_name.' '.$agent->last_name) }}
                                        </div>
                                        <div class="text-xs text-slate-500">{{ $agent->email }}</div>
                                    </td>
                                    <td class="px-6 py-4 text-sm text-slate-600 dark:text-slate-300">
                                        {{ $agent->agentRealEstates->pluck('name')->join(', ') ?: 'Sin inmobiliaria' }}
                                    </td>
                                    <td class="px-6 py-4">
                                        <form method="POST" action="{{ route('realEstate.agents.agencyAssignments.store') }}"
                                            class="flex min-w-[300px] items-center gap-2">
                                            @csrf
                                            <input type="hidden" name="agent_id" value="{{ $agent->id }}">
                                            <select name="real_estate_id" required
                                                class="h-10 flex-1 rounded-lg border-gray-200 bg-white text-sm text-slate-700 dark:border-gray-700 dark:bg-slate-800 dark:text-slate-200">
                                                <option value="">Selecciona una inmobiliaria</option>
                                                @foreach ($realEstates as $realEstate)
                                                    <option value="{{ $realEstate->id }}">{{ $realEstate->name }}</option>
                                                @endforeach
                                            </select>
                                            <button type="submit"
                                                class="h-10 rounded-lg bg-primary px-4 text-sm font-semibold text-white hover:bg-blue-600">
                                                Vincular
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3" class="px-6 py-10 text-center text-sm text-slate-500">
                                        No hay agentes registrados.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection