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

@section('extra-styles')
@endsection

@section('content')
    <div class="flex flex-col overflow-auto p-6 md:p-10 gap-8">
        <div class="flex flex-col gap-1">
            <h2 class="text-[#111318] dark:text-white text-3xl md:text-4xl font-bold tracking-tight">Nuevo
                Prospecto</h2>
            <p class="text-[#616f89] dark:text-gray-400 text-base">Completa la información para dar de alta a un
                nuevo interesado.</p>
        </div>
        <div class="bg-white dark:bg-[#1a2332] rounded-xl shadow-sm border border-gray-200 dark:border-gray-800 ">
            <form class="p-6 md:p-8 space-y-8">
                <div>
                    <h3
                        class="text-lg font-semibold text-[#111318] dark:text-white border-b border-gray-100 dark:border-gray-800 pb-3 mb-6 flex items-center gap-2">
                        <span class="material-symbols-outlined text-primary">person</span>
                        Información del Contacto
                    </h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5"
                                for="client-name">Nombre del Cliente</label>
                            <input
                                class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-[#131b29] text-gray-900 dark:text-white focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all outline-none"
                                id="client-name" name="client-name" placeholder="Ej. Juan Pérez" type="text" />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5"
                                for="email">Email</label>
                            <input
                                class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-[#131b29] text-gray-900 dark:text-white focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all outline-none"
                                id="email" name="email" placeholder="ejemplo@correo.com" type="email" />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5"
                                for="phone">Teléfono</label>
                            <input
                                class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-[#131b29] text-gray-900 dark:text-white focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all outline-none"
                                id="phone" name="phone" placeholder="+52 55 1234 5678" type="tel" />
                        </div>
                    </div>
                </div>
                <div>
                    <h3
                        class="text-lg font-semibold text-[#111318] dark:text-white border-b border-gray-100 dark:border-gray-800 pb-3 mb-6 flex items-center gap-2">
                        <span class="material-symbols-outlined text-primary">assignment_ind</span>
                        Seguimiento de Venta
                    </h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5"
                                for="agent">Agente de Ventas</label>
                            <select
                                class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-[#131b29] text-gray-900 dark:text-white focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all outline-none appearance-none cursor-pointer"
                                id="agent" name="agent">
                                <option disabled="" selected="" value="">Selecciona un agente
                                </option>
                                <option value="1">Juan Pérez</option>
                                <option value="2">Ana López</option>
                                <option value="3">María González</option>
                                <option value="4">David Ruiz</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5"
                                for="source">Fuente</label>
                            <select
                                class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-[#131b29] text-gray-900 dark:text-white focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all outline-none appearance-none cursor-pointer"
                                id="source" name="source">
                                <option disabled="" selected="" value="">Selecciona la fuente
                                </option>
                                <option value="instagram">Instagram Ads</option>
                                <option value="facebook">Facebook</option>
                                <option value="referral">Referido</option>
                                <option value="web">Portal Web</option>
                                <option value="email">Campaña Email</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div>
                    <h3
                        class="text-lg font-semibold text-[#111318] dark:text-white border-b border-gray-100 dark:border-gray-800 pb-3 mb-6 flex items-center gap-2">
                        <span class="material-symbols-outlined text-primary">apartment</span>
                        Interés y Notas
                    </h3>
                    <div class="space-y-6">
                        <div class="relative">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5"
                                for="property">Propiedad de Interés</label>
                            <div class="relative">
                                <span
                                    class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">search</span>
                                <input
                                    class="w-full pl-10 pr-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-[#131b29] text-gray-900 dark:text-white focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all outline-none"
                                    id="property" list="properties" name="property"
                                    placeholder="Buscar propiedad o desarrollo..." />
                                <datalist id="properties">
                                    <option value="Dept 402 - Torre Reforma">
                                    </option>
                                    <option value="Casa Lomas V">
                                    </option>
                                    <option value="Penthouse Polanco">
                                    </option>
                                    <option value="Lote 12 - Valle Real">
                                    </option>
                                    <option value="Dept 101 - Roma Norte">
                                    </option>
                                </datalist>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5"
                                for="notes">Notas Adicionales</label>
                            <textarea
                                class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-[#131b29] text-gray-900 dark:text-white focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all outline-none resize-none"
                                id="notes" name="notes"
                                placeholder="Agrega cualquier detalle relevante sobre el prospecto o sus preferencias..." rows="4"></textarea>
                        </div>
                    </div>
                </div>
                <div
                    class="flex flex-col sm:flex-row items-center justify-end gap-3 pt-6 border-t border-gray-100 dark:border-gray-800">
                    <button
                        class="w-full sm:w-auto px-6 py-2.5 text-sm font-semibold text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors border border-gray-200 dark:border-gray-700"
                        type="button">
                        Cancelar
                    </button>
                    <button
                        class="w-full sm:w-auto px-8 py-2.5 text-sm font-semibold text-white bg-primary hover:bg-primary/90 rounded-lg shadow-md shadow-blue-500/20 transition-all active:scale-95 flex items-center justify-center gap-2"
                        type="submit">
                        <span class="material-symbols-outlined text-[20px]">save</span>
                        Guardar Prospecto
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection