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

@section('content')
    <div class="flex flex-col max-w-[1400px] mx-auto p-6 md:p-10 gap-6">
        <div class="flex items-center gap-2 text-sm text-[#616f89] dark:text-gray-400 mb-2">
            <a class="hover:text-primary transition-colors" href="#">Prospectos</a>
            <span class="material-symbols-outlined text-sm">chevron_right</span>
            <span class="text-[#111318] dark:text-white font-medium">Detalle del Prospecto</span>
        </div>
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
            <div class="lg:col-span-5 flex flex-col gap-6">
                <div
                    class="bg-white dark:bg-[#1a2332] rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm overflow-hidden">
                    <div class="p-6 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center">
                        <h3 class="text-lg font-bold">Información del Prospecto</h3>
                        <button
                            class="flex items-center gap-2 px-4 py-2 rounded-lg border border-primary/20 text-primary hover:bg-primary/5 text-sm font-semibold transition-all">
                            <span class="material-symbols-outlined text-[18px]">edit</span>
                            <span>Editar Prospecto</span>
                        </button>
                    </div>
                    <div class="p-8 flex flex-col gap-8">
                        <div class="flex items-start gap-4">
                            <div class="size-20 rounded-2xl bg-primary/10 flex items-center justify-center text-primary">
                                <span class="material-symbols-outlined text-4xl">person</span>
                            </div>
                            <div class="flex flex-col gap-1">
                                <h2 class="text-2xl font-bold">Sofía Martínez</h2>
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 border border-green-200 dark:border-green-800 w-fit">
                                    Contactado
                                </span>
                            </div>
                        </div>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-y-6 gap-x-4">
                            <div class="flex flex-col gap-1">
                                <span
                                    class="text-xs text-[#616f89] dark:text-gray-400 font-medium uppercase tracking-wider">Correo
                                    Electrónico</span>
                                <div class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-gray-400 text-sm">mail</span>
                                    <span class="text-sm font-medium">sofia.m@gmail.com</span>
                                </div>
                            </div>
                            <div class="flex flex-col gap-1">
                                <span
                                    class="text-xs text-[#616f89] dark:text-gray-400 font-medium uppercase tracking-wider">Teléfono</span>
                                <div class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-gray-400 text-sm">phone</span>
                                    <span class="text-sm font-medium">+52 55 1234 5678</span>
                                </div>
                            </div>
                            <div class="flex flex-col gap-1">
                                <span
                                    class="text-xs text-[#616f89] dark:text-gray-400 font-medium uppercase tracking-wider">Propiedad
                                    de Interés</span>
                                <div class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-primary text-sm">apartment</span>
                                    <a class="text-sm font-semibold text-primary hover:underline" href="#">Dept 402 -
                                        Torre Reforma</a>
                                </div>
                            </div>
                            <div class="flex flex-col gap-1">
                                <span
                                    class="text-xs text-[#616f89] dark:text-gray-400 font-medium uppercase tracking-wider">Fuente</span>
                                <div class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-pink-500 text-sm">ads_click</span>
                                    <span class="text-sm font-medium">Instagram Ads</span>
                                </div>
                            </div>
                            <div class="flex flex-col gap-1">
                                <span
                                    class="text-xs text-[#616f89] dark:text-gray-400 font-medium uppercase tracking-wider">Agente
                                    Asignado</span>
                                <div class="flex items-center gap-2">
                                    <div class="h-6 w-6 rounded-full bg-cover bg-center"
                                        style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBiVirBTpb9sSAV7-x8AahrhUDujgg_PNFtSZPednqQ1JGU2Fl0Q2j8y1aUtDfwKUeLVL-r_9GkmC2aTCPhiUYUxjRDHFov-NnkcLWqaPS389CIe89EDGFnn_d20P-sK6HB30GG28id43F-YG0OJ1f6QqIpklExjzQDmGSteK2La-4Ji-qO7ic6-mCsC0n5fQns9ESnQVHebE73PtHCCOxcH9qKd1hK2iBj9ra7_b3EDDPJw-6a0v2ui3p0SCvU7r3RIWDt3NyRbU0");'>
                                    </div>
                                    <span class="text-sm font-medium">Juan Pérez</span>
                                </div>
                            </div>
                            <div class="flex flex-col gap-1">
                                <span
                                    class="text-xs text-[#616f89] dark:text-gray-400 font-medium uppercase tracking-wider">Fecha
                                    de Creación</span>
                                <div class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-gray-400 text-sm">event</span>
                                    <span class="text-sm font-medium">01 Oct, 2023</span>
                                </div>
                            </div>
                        </div>
                        <div
                            class="flex flex-col gap-3 p-4 bg-gray-50 dark:bg-[#131b29] rounded-lg border border-gray-100 dark:border-gray-800">
                            <span class="text-xs font-bold text-[#616f89] dark:text-gray-400 uppercase">Notas
                                Rápidas</span>
                            <p class="text-sm text-gray-600 dark:text-gray-300 italic">"Busca departamento de 2
                                recámaras con vista al parque. Tiene presupuesto aprobado."</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="lg:col-span-7 flex flex-col gap-6">
                <div
                    class="bg-white dark:bg-[#1a2332] rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm overflow-hidden flex flex-col h-full min-h-[600px]">
                    <div class="p-6 border-b border-gray-100 dark:border-gray-800">
                        <h3 class="text-lg font-bold">Historial de Seguimiento</h3>
                    </div>
                    <div class="flex-1 p-6 relative">
                        <div class="absolute left-10 top-8 bottom-8 w-px bg-gray-200 dark:bg-gray-700"></div>
                        <div class="flex flex-col gap-10">
                            <div class="relative flex gap-6 group">
                                <div
                                    class="z-10 flex items-center justify-center size-8 rounded-full bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 ring-4 ring-white dark:ring-[#1a2332]">
                                    <span class="material-symbols-outlined text-sm">call</span>
                                </div>
                                <div class="flex flex-col gap-2">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm font-bold">Llamada de seguimiento</span>
                                        <span
                                            class="text-[11px] text-[#616f89] dark:text-gray-400 font-medium px-2 py-0.5 bg-gray-100 dark:bg-gray-800 rounded">12
                                            Oct, 10:30 AM</span>
                                    </div>
                                    <p class="text-sm text-gray-600 dark:text-gray-400">Se le llamó para
                                        confirmar interés. Comentó que está revisando opciones de financiamiento
                                        con su banco.</p>
                                    <div class="text-xs text-gray-400 italic">Registrado por Juan Pérez</div>
                                </div>
                            </div>
                            <div class="relative flex gap-6 group">
                                <div
                                    class="z-10 flex items-center justify-center size-8 rounded-full bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400 ring-4 ring-white dark:ring-[#1a2332]">
                                    <span class="material-symbols-outlined text-sm">mail</span>
                                </div>
                                <div class="flex flex-col gap-2">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm font-bold">Envío de brochure PDF</span>
                                        <span
                                            class="text-[11px] text-[#616f89] dark:text-gray-400 font-medium px-2 py-0.5 bg-gray-100 dark:bg-gray-800 rounded">10
                                            Oct, 03:15 PM</span>
                                    </div>
                                    <p class="text-sm text-gray-600 dark:text-gray-400">Se envió el catálogo
                                        detallado de acabados y amenidades de Torre Reforma por WhatsApp.</p>
                                </div>
                            </div>
                            <div class="relative flex gap-6 group">
                                <div
                                    class="z-10 flex items-center justify-center size-8 rounded-full bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400 ring-4 ring-white dark:ring-[#1a2332]">
                                    <span class="material-symbols-outlined text-sm">meeting_room</span>
                                </div>
                                <div class="flex flex-col gap-2">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm font-bold">Visita a Showroom</span>
                                        <span
                                            class="text-[11px] text-[#616f89] dark:text-gray-400 font-medium px-2 py-0.5 bg-gray-100 dark:bg-gray-800 rounded">08
                                            Oct, 11:00 AM</span>
                                    </div>
                                    <p class="text-sm text-gray-600 dark:text-gray-400">El cliente visitó el
                                        departamento muestra. Mostró mucho interés en la terraza y la
                                        distribución de la cocina.</p>
                                </div>
                            </div>
                            <div class="relative flex gap-6 group">
                                <div
                                    class="z-10 flex items-center justify-center size-8 rounded-full bg-amber-100 text-amber-600 dark:bg-amber-900/30 dark:text-amber-400 ring-4 ring-white dark:ring-[#1a2332]">
                                    <span class="material-symbols-outlined text-sm">sticky_note_2</span>
                                </div>
                                <div class="flex flex-col gap-2">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm font-bold">Primer contacto</span>
                                        <span
                                            class="text-[11px] text-[#616f89] dark:text-gray-400 font-medium px-2 py-0.5 bg-gray-100 dark:bg-gray-800 rounded">01
                                            Oct, 09:20 AM</span>
                                    </div>
                                    <p class="text-sm text-gray-600 dark:text-gray-400">Lead recibido vía
                                        Instagram Ads. Se asignó automáticamente a Juan Pérez.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

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