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

@section('extra-styles')
    <style type="text/tailwindcss">
        body {
            font-family: 'Inter', sans-serif;
        }

        .form-section {
            @apply bg-white dark:bg-[#1e232e] p-6 rounded-xl border border-[#e5e7eb] dark:border-[#2a3140] shadow-sm mb-6;
        }

        .input-group {
            @apply flex flex-col gap-1.5;
        }

        .label {
            @apply text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider;
        }

        .input-field {
            @apply w-full rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-sm text-gray-700 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 placeholder-gray-400;
        }

        .required::after {
            content: "*";
            @apply text-red-500 ml-1;
        }
    </style>
@endsection

@section('content')
    <div class="flex-1 overflow-auto bg-background-light dark:bg-background-dark p-6">
        <form class="mx-auto max-w-[900px]">
            <div class="mb-6">
                <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Registro de Transacción</h3>
                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Complete todos los campos requeridos
                    para formalizar el registro de la venta.</p>
            </div>
            <div class="form-section">
                <div class="flex items-center gap-2 mb-4">
                    <span class="material-symbols-outlined text-primary">person</span>
                    <h4 class="font-semibold text-gray-900 dark:text-white">Información del Cliente</h4>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="input-group">
                        <label class="label required">Comprador (Nombre Completo)</label>
                        <input class="input-field" placeholder="Ej. Maria González" required="" type="text" />
                    </div>
                    <div class="input-group">
                        <label class="label required">Correo Electrónico</label>
                        <input class="input-field" placeholder="nombre@ejemplo.com" required="" type="email" />
                    </div>
                    <div class="input-group">
                        <label class="label">Teléfono de Contacto</label>
                        <input class="input-field" placeholder="+52 (55) 0000-0000" type="tel" />
                    </div>
                    <div class="input-group">
                        <label class="label">RFC (Opcional)</label>
                        <input class="input-field uppercase" placeholder="ABCD000000XXX" type="text" />
                    </div>
                </div>
            </div>
            <div class="form-section">
                <div class="flex items-center gap-2 mb-4">
                    <span class="material-symbols-outlined text-primary">apartment</span>
                    <h4 class="font-semibold text-gray-900 dark:text-white">Detalles de la Propiedad</h4>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="input-group md:col-span-2">
                        <label class="label required">Propiedad / Unidad</label>
                        <select class="input-field">
                            <option value="">Seleccione una propiedad disponible</option>
                            <option>Depto 402 - Torre Altus</option>
                            <option>Casa 15 - Residencial Bosques</option>
                            <option>Penthouse B - Torre Altus</option>
                            <option>Local 04 - Plaza Centro</option>
                        </select>
                    </div>
                    <div class="input-group">
                        <label class="label">Dirección</label>
                        <input class="input-field bg-gray-50 dark:bg-gray-800/50"
                            placeholder="Se autocompleta al seleccionar propiedad" readonly="" type="text" />
                    </div>
                    <div class="input-group">
                        <label class="label">Tipo de Propiedad</label>
                        <input class="input-field bg-gray-50 dark:bg-gray-800/50" placeholder="Residencial / Comercial"
                            readonly="" type="text" />
                    </div>
                </div>
            </div>
            <div class="form-section">
                <div class="flex items-center gap-2 mb-4">
                    <span class="material-symbols-outlined text-primary">payments</span>
                    <h4 class="font-semibold text-gray-900 dark:text-white">Términos de la Venta</h4>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div class="input-group">
                        <label class="label required">Fecha de Operación</label>
                        <input class="input-field" required="" type="date" />
                    </div>
                    <div class="input-group">
                        <label class="label required">Precio Total (MXN)</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-3 flex items-center text-gray-500">$</span>
                            <input class="input-field pl-7" placeholder="0.00" required="" type="number" />
                        </div>
                    </div>
                    <div class="input-group">
                        <label class="label required">Estatus</label>
                        <select class="input-field" required="">
                            <option value="proceso">En Proceso</option>
                            <option value="apartado">Apartado</option>
                            <option value="escriturado">Escriturado</option>
                            <option value="cancelado">Cancelado</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="form-section">
                <div class="flex items-center gap-2 mb-4">
                    <span class="material-symbols-outlined text-primary">badge</span>
                    <h4 class="font-semibold text-gray-900 dark:text-white">Asignación de Agente</h4>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="input-group">
                        <label class="label required">Agente Responsable</label>
                        <select class="input-field" required="">
                            <option value="">Seleccione un agente</option>
                            <option>Carlos Ruiz</option>
                            <option>Ana López</option>
                            <option>Luis Ramirez</option>
                            <option>Patricia Vega</option>
                        </select>
                    </div>
                    <div class="input-group">
                        <label class="label">Comisión (%)</label>
                        <input class="input-field" placeholder="Ej. 3.0" step="0.1" type="number" />
                    </div>
                </div>
            </div>
            <div class="flex flex-col sm:flex-row items-center justify-end gap-3 mt-8 pb-12">
                <button
                    class="w-full sm:w-auto px-6 py-2.5 rounded-lg text-sm font-semibold text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
                    type="button">
                    Cancelar
                </button>
                <button
                    class="w-full sm:w-auto flex items-center justify-center gap-2 px-8 py-2.5 rounded-lg bg-primary text-white text-sm font-bold shadow-md hover:bg-blue-600 transition-colors"
                    type="submit">
                    <span class="material-symbols-outlined text-[20px]">save</span>
                    Guardar Venta
                </button>
            </div>
        </form>
    </div>
@endsection

{{-- <!DOCTYPE html>
<html class="light" lang="es">

<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>Nueva Venta - Inmobiliaria MX</title>
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap"
        rel="stylesheet" />
    <link
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
        rel="stylesheet" />
    <script>
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        "primary": "#2b6cee",
                        "background-light": "#f6f6f8",
                        "background-dark": "#101622",
                    },
                    fontFamily: {
                        "display": ["Inter", "sans-serif"]
                    },
                    borderRadius: {
                        "DEFAULT": "0.25rem",
                        "lg": "0.5rem",
                        "xl": "0.75rem",
                        "full": "9999px"
                    },
                },
            },
        }
    </script>
    
</head>

<body class="bg-background-light dark:bg-background-dark text-[#111318] dark:text-white font-display">
    <div class="flex min-h-screen w-full overflow-hidden">
        <aside
            class="flex w-64 flex-col border-r border-[#f0f2f4] bg-white dark:bg-[#1e232e] dark:border-[#2a3140] h-screen sticky top-0 overflow-y-auto shrink-0">
            <div class="p-4">
                <div class="flex items-center gap-3 px-2 py-4">
                    <div class="bg-center bg-no-repeat bg-cover rounded-full size-10 shadow-sm"
                        style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAo45Gdnuhr0AjUERYronNPgli0Yau-1yKrTESwdPln6BjywUaJZhUKZrG31a7CReCbaYOI_vHL3i1C9aN-Y7pHKznAaSWG63OHwHwW2qoC1dHNbKRw7ymz8TZEnkUuooz2wBpMxZwJPEzxZmeJu8mTYBaDgZbcFDp0YUYqxnw7K1KjL7sZ6MExe42-NWTC4-89lx6RzY-IatYSeouaSuqeVXcItn00rRdurv8flWI_jPrapaR0qfa_oh1xHUdxNfOMJvrfN9lwtBg");'>
                    </div>
                    <div class="flex flex-col">
                        <h1 class="text-base font-bold leading-tight text-gray-900 dark:text-white">Inmobiliaria MX
                        </h1>
                        <p class="text-xs text-gray-500 dark:text-gray-400">Admin Panel</p>
                    </div>
                </div>
                <nav class="flex flex-col gap-1 mt-6">
                    <a class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800 transition-colors"
                        href="#">
                        <span class="material-symbols-outlined text-[20px]">dashboard</span>
                        <span class="text-sm font-medium">Dashboard</span>
                    </a>
                    <a class="flex items-center gap-3 px-3 py-2 rounded-lg bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-300 transition-colors"
                        href="#">
                        <span class="material-symbols-outlined text-[20px] fill-1">receipt_long</span>
                        <span class="text-sm font-medium">Ventas</span>
                    </a>
                    <a class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800 transition-colors"
                        href="#">
                        <span class="material-symbols-outlined text-[20px]">apartment</span>
                        <span class="text-sm font-medium">Propiedades</span>
                    </a>
                    <a class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800 transition-colors"
                        href="#">
                        <span class="material-symbols-outlined text-[20px]">group</span>
                        <span class="text-sm font-medium">Clientes</span>
                    </a>
                    <a class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800 transition-colors"
                        href="#">
                        <span class="material-symbols-outlined text-[20px]">credit_card</span>
                        <span class="text-sm font-medium">Gastos</span>
                    </a>
                    <a class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800 transition-colors"
                        href="#">
                        <span class="material-symbols-outlined text-[20px]">bar_chart</span>
                        <span class="text-sm font-medium">Reportes</span>
                    </a>
                </nav>
            </div>
            <div class="mt-auto p-4 border-t border-[#f0f2f4] dark:border-[#2a3140]">
                <a class="flex items-center gap-3 px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800 transition-colors"
                    href="#">
                    <span class="material-symbols-outlined text-[20px]">settings</span>
                    <span class="text-sm font-medium">Configuración</span>
                </a>
            </div>
        </aside>
        <main class="flex-1 flex flex-col h-screen overflow-hidden relative">
            <header
                class="flex shrink-0 items-center justify-between border-b border-[#f0f2f4] bg-white dark:bg-[#1e232e] dark:border-[#2a3140] px-6 py-3">
                <div class="flex items-center gap-3">
                    <a class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200" href="#">
                        <span class="material-symbols-outlined">arrow_back</span>
                    </a>
                    <h2 class="text-lg font-bold text-gray-900 dark:text-white tracking-tight">Crear Nueva Venta</h2>
                </div>
                <div class="flex items-center gap-4">
                    <div class="h-10 w-10 rounded-full bg-cover bg-center border border-gray-200 dark:border-gray-700"
                        style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAfm9iB2z82PGiQB_Pam7lVtitp2fyXgvdOpFMkL_n96esu4ZL_izMaeBkaktxDClQ5qku-RyZtX6oJGqwORqDMZakdm-A1PHIGtZCztj8CfwxQWuZMomTQCuRoOq3tOtsuDZqrXXcSypiwn6ITc73GkKVlzza9UzfLVPJ8l3R_02W1JpWSQGz2U33EavJFbTTRwvXM3mf-mKGd572-bJvaV1A5MfUJ-4nYXFuZZSEazEiCpL_MXx7QNXH6yLp4jOIGNh1JvgdJqDw");'>
                    </div>
                </div>
            </header>

        </main>
    </div>

</body>

</html> --}}