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

@section('content')
    <div class="mx-auto flex max-w-[1400px] flex-col gap-6 p-6 md:p-10">
        <div class="mb-2 flex items-center gap-2 text-sm text-[#616f89] dark:text-gray-400">
            <a class="transition-colors hover:text-primary" href="{{ route('realEstate.leads') }}">Prospectos</a>
            <span class="material-symbols-outlined text-sm">chevron_right</span>
            <span class="font-medium text-[#111318] dark:text-white">Detalle del Prospecto</span>
        </div>

        @if (session('success'))
            <div
                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700 dark:border-emerald-900/40 dark:bg-emerald-900/20 dark:text-emerald-300">
                {{ session('success') }}
            </div>
        @endif

        <div class="grid grid-cols-1 items-start gap-8 lg:grid-cols-12">
            <div class="flex flex-col gap-6 lg:col-span-5">
                <div
                    class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-[#1a2332]">
                    <div class="flex items-center justify-between border-b border-gray-100 p-6 dark:border-gray-800">
                        <h3 class="text-lg font-bold">Informacion del Prospecto</h3>
                        <a
                            class="flex items-center gap-2 rounded-lg border border-primary/20 px-4 py-2 text-sm font-semibold text-primary transition-all hover:bg-primary/5"
                            href="{{ route('realEstate.lead.create', ['lead_id' => $prospect['id']]) }}">
                            <span class="material-symbols-outlined text-[18px]">edit</span>
                            <span>Editar Prospecto</span>
                        </a>
                    </div>

                    <div class="flex flex-col gap-8 p-8">
                        <div class="flex items-start gap-4">
                            <div
                                class="flex size-20 items-center justify-center rounded-2xl bg-primary/10 text-2xl font-bold text-primary">
                                {{ $prospect['initials'] ?? 'PR' }}
                            </div>
                            <div class="flex flex-col gap-1">
                                <h2 class="text-2xl font-bold">{{ $prospect['fullName'] ?? 'Prospecto sin nombre' }}</h2>
                                <span
                                    class="inline-flex w-fit items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ $prospect['status']['class'] ?? '' }}">
                                    {{ $prospect['status']['name'] ?? 'Sin estatus' }}
                                </span>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                            <div class="flex flex-col gap-1">
                                <span
                                    class="text-xs font-medium uppercase tracking-wider text-[#616f89] dark:text-gray-400">Correo
                                    Electronico</span>
                                <div class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-sm text-gray-400">mail</span>
                                    <span class="text-sm font-medium">{{ $prospect['email'] ?: 'Sin correo registrado' }}</span>
                                </div>
                            </div>

                            <div class="flex flex-col gap-1">
                                <span
                                    class="text-xs font-medium uppercase tracking-wider text-[#616f89] dark:text-gray-400">Telefono</span>
                                <div class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-sm text-gray-400">phone</span>
                                    <span class="text-sm font-medium">{{ $prospect['phone'] ?: 'Sin telefono registrado' }}</span>
                                </div>
                            </div>

                            <div class="flex flex-col gap-1">
                                <span
                                    class="text-xs font-medium uppercase tracking-wider text-[#616f89] dark:text-gray-400">Propiedad
                                    de Interes</span>
                                <div class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-sm text-primary">apartment</span>
                                    <span class="text-sm font-semibold text-primary">
                                        {{ $prospect['interest']['name'] ?? 'Sin interes registrado' }}
                                    </span>
                                </div>
                            </div>

                            <div class="flex flex-col gap-1">
                                <span
                                    class="text-xs font-medium uppercase tracking-wider text-[#616f89] dark:text-gray-400">Fuente</span>
                                <div class="flex items-center gap-2">
                                    <span
                                        class="material-symbols-outlined text-sm text-pink-500">{{ $prospect['sourceIcon'] ?? 'campaign' }}</span>
                                    <span class="text-sm font-medium">{{ $prospect['source'] ?: 'Sin fuente registrada' }}</span>
                                </div>
                            </div>

                            <div class="flex flex-col gap-1">
                                <span
                                    class="text-xs font-medium uppercase tracking-wider text-[#616f89] dark:text-gray-400">Agente
                                    Asignado</span>
                                <div class="flex items-center gap-2">
                                    <div
                                        class="flex h-6 w-6 items-center justify-center rounded-full bg-primary/10 text-[10px] font-bold text-primary">
                                        {{ $prospect['agent']['initials'] ?? 'AG' }}
                                    </div>
                                    <span class="text-sm font-medium">{{ $prospect['agent']['name'] ?? 'Sin agente asignado' }}</span>
                                </div>
                            </div>

                            <div class="flex flex-col gap-1">
                                <span
                                    class="text-xs font-medium uppercase tracking-wider text-[#616f89] dark:text-gray-400">Fecha
                                    de Creacion</span>
                                <div class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-sm text-gray-400">event</span>
                                    <span class="text-sm font-medium">{{ $prospect['createdAtFormatted'] ?? 'Sin fecha' }}</span>
                                </div>
                            </div>
                        </div>

                        <div
                            class="rounded-lg border border-gray-100 bg-gray-50 p-4 dark:border-gray-800 dark:bg-[#131b29]">
                            <span class="text-xs font-bold uppercase text-[#616f89] dark:text-gray-400">Notas Rapidas</span>
                            <p class="mt-3 text-sm italic text-gray-600 dark:text-gray-300">
                                "{{ $prospect['notes'] ?: 'Sin notas registradas para este prospecto.' }}"
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex flex-col gap-6 lg:col-span-7">
                <div
                    class="flex min-h-[600px] flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-[#1a2332]">
                    <div class="border-b border-gray-100 p-6 dark:border-gray-800">
                        <h3 class="text-lg font-bold">Historial de Seguimiento</h3>
                    </div>

                    <div class="relative flex-1 p-6">
                        @if (($prospect['activities'] ?? []) !== [])
                            <div class="absolute bottom-8 left-10 top-8 w-px bg-gray-200 dark:bg-gray-700"></div>
                        @endif

                        <div class="flex flex-col gap-10">
                            @forelse (($prospect['activities'] ?? []) as $activity)
                                <div class="group relative flex gap-6">
                                    <div
                                        class="z-10 flex size-8 items-center justify-center rounded-full ring-4 ring-white dark:ring-[#1a2332] {{ $activity['iconClass'] }}">
                                        <span class="material-symbols-outlined text-sm">{{ $activity['icon'] }}</span>
                                    </div>

                                    <div class="flex flex-col gap-2">
                                        <div class="flex flex-wrap items-center gap-2">
                                            <span class="text-sm font-bold">{{ $activity['title'] }}</span>
                                            @if (!empty($activity['eventDateBadge']))
                                                <span
                                                    class="rounded bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-[#616f89] dark:bg-gray-800 dark:text-gray-400">
                                                    {{ $activity['eventDateBadge'] }}
                                                </span>
                                            @endif
                                        </div>

                                        <p class="text-sm text-gray-600 dark:text-gray-400">
                                            {{ $activity['notes'] ?: 'Actividad registrada sin observaciones adicionales.' }}
                                        </p>

                                        @if (!empty($activity['interestName']))
                                            <div class="text-xs text-primary">
                                                Interes relacionado: {{ $activity['interestName'] }}
                                            </div>
                                        @endif

                                        @if (!empty($activity['agentName']))
                                            <div class="text-xs italic text-gray-400">
                                                Registrado por {{ $activity['agentName'] }}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @empty
                                <div
                                    class="rounded-xl border border-dashed border-gray-200 bg-gray-50 px-6 py-10 text-center text-sm text-gray-500 dark:border-gray-800 dark:bg-[#131b29] dark:text-gray-400">
                                    Este prospecto aun no tiene actividades registradas.
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="fixed bottom-10 right-10">
        <button
            class="flex h-14 items-center justify-center gap-2 rounded-full bg-primary pl-5 pr-7 text-sm font-bold text-white shadow-2xl shadow-blue-500/40 transition-all hover:scale-105 hover:bg-primary/90 active:scale-95"
            type="button">
            <span class="material-symbols-outlined text-[24px]">add_circle</span>
            <span>Registrar Nueva Actividad</span>
        </button>
    </div>
@endsection