editp.module.html

<main class="max-w-4xl mx-auto px-4 py-12">
<div class="bg-surface-light dark:bg-surface-dark rounded-xl shadow-xl overflow-hidden border border-slate-200 dark:border-slate-800">
<div class="h-2 bg-primary w-full"></div>
<div class="p-8">
<div class="mb-8">
<h2 class="text-xl font-semibold text-slate-800 dark:text-slate-100">Información del Producto</h2>
<p class="text-slate-500 dark:text-slate-400 text-sm mt-1">Puedes editar los datos del producto a continuación. Asegúrate de que los precios sean correctos.</p>
</div>
<form class="space-y-8">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="col-span-1 md:col-span-2">
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2" for="nombre">Nombre del Producto</label>
<input class="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all" id="nombre" name="nombre" type="text" value="Fanta de naranja"/>
</div>
<div class="col-span-1 md:col-span-2">
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2" for="descripcion">Descripción</label>
<textarea class="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all" id="descripcion" name="descripcion" rows="2">Sabor naranja de 600 ml</textarea>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2" for="tipo">Tipo de Producto</label>
<select class="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all" id="tipo" name="tipo">
<option selected="" value="bebida">Bebida</option>
<option value="alimento">Alimento</option>
<option value="limpieza">Limpieza</option>
<option value="otros">Otros</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2" for="unidad">Unidad de Medida</label>
<select class="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all" id="unidad" name="unidad">
<option selected="" value="unidad">Unidad</option>
<option value="kg">Kilogramo</option>
<option value="lt">Litro</option>
<option value="paquete">Paquete</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2" for="proveedor">Proveedor</label>
<select class="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all" id="proveedor" name="proveedor">
<option selected="" value="cocacola">Coca Cola</option>
<option value="pepsi">PepsiCo</option>
<option value="nestle">Nestlé</option>
<option value="general">Proveedor General</option>
</select>
</div>
<div class="hidden md:block"></div>
<div class="pt-4 border-t border-slate-100 dark:border-slate-700 col-span-1 md:col-span-2">
<h3 class="text-sm font-semibold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-4">Información Financiera</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2" for="precio_compra">Precio de Compra ($)</label>
<div class="relative">
<span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">$</span>
<input class="w-full pl-8 pr-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all" id="precio_compra" name="precio_compra" step="0.01" type="number" value="13.00"/>
</div>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2" for="precio_venta">Precio de Venta ($)</label>
<div class="relative">
<span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">$</span>
<input class="w-full pl-8 pr-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all font-bold text-slate-900 dark:text-white" id="precio_venta" name="precio_venta" step="0.01" type="number" value="19.00"/>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col sm:flex-row items-center justify-end gap-4 pt-8 border-t border-slate-100 dark:border-slate-700">
<button class="w-full sm:w-auto px-8 py-3 rounded-lg font-medium text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" onclick="window.history.back()" type="button">
                            Cancelar
                        </button>
<button class="w-full sm:w-auto flex items-center justify-center gap-2 bg-primary hover:bg-yellow-500 text-slate-900 font-bold px-12 py-3 rounded-lg shadow-lg shadow-yellow-500/20 active:scale-95 transition-all" type="submit">
<span class="material-icons-round text-[20px]">save</span>
                            Guardar Cambios
                        </button>
</div>
</form>
</div>
</div>
<div class="mt-8 flex flex-wrap justify-center gap-x-8 gap-y-2 text-xs text-slate-400 dark:text-slate-500 text-center">
<span class="flex items-center gap-1"><span class="material-icons-round text-sm">inventory_2</span> ID de Producto: #102934</span>
<span class="flex items-center gap-1"><span class="material-icons-round text-sm">schedule</span> Última actualización: hace 2 horas</span>
<span class="flex items-center gap-1"><span class="material-icons-round text-sm">security</span> Sesión segura</span>
</div>
</main>