LauckCycles/resources/views/expenses/create.blade.php

<x-layout title="Lauck - Nuevo Gasto">
    <x-section-header subtitle="Gastos" title="Registrar " highlight="Gasto" />

    <div class="w-full max-w-3xl mx-auto bg-gray-200 dark:bg-panel-bg border border-neutral-400 dark:border-neutral-800 rounded-xl p-8 shadow-lg relative">
        <form action="{{ route('expenses.store') }}" method="POST">
            @csrf
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                
                <div>
                    <label class="block mb-2 text-sm font-bold text-gray-900 dark:text-white">Descripción <span class="text-red-500">*</span></label>
                    <input type="text" name="description" value="{{ old('description') }}" required class="bg-gray-50 border border-gray-400 text-gray-900 text-sm rounded-lg focus:ring-neon-lime focus:border-neon-lime block w-full p-2.5 dark:bg-neutral-900 dark:border-neutral-700 dark:placeholder-gray-400 dark:text-white" placeholder="Ej. Pago de luz, Compra de mercadería...">
                    @error('description') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block mb-2 text-sm font-bold text-gray-900 dark:text-white">Categoría <span class="text-red-500">*</span></label>
                    <select name="expense_category" required class="bg-gray-50 border border-gray-400 text-gray-900 text-sm rounded-lg focus:ring-neon-lime focus:border-neon-lime block w-full p-2.5 dark:bg-neutral-900 dark:border-neutral-700 dark:text-white">
                        <option value="Mercadería" {{ old('expense_category') == 'Mercadería' ? 'selected' : '' }}>Mercadería</option>
                        <option value="Servicios" {{ old('expense_category') == 'Servicios' ? 'selected' : '' }}>Servicios (Luz, Internet, etc)</option>
                        <option value="Impuestos" {{ old('expense_category') == 'Impuestos' ? 'selected' : '' }}>Impuestos</option>
                        <option value="Logística" {{ old('expense_category') == 'Logística' ? 'selected' : '' }}>Logística (Envíos)</option>
                        <option value="Otros" {{ old('expense_category', 'Otros') == 'Otros' ? 'selected' : '' }}>Otros</option>
                    </select>
                    @error('expense_category') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block mb-2 text-sm font-bold text-gray-900 dark:text-white">Proveedor (Opcional)</label>
                    <select name="supplier_id" class="bg-gray-50 border border-gray-400 text-gray-900 text-sm rounded-lg focus:ring-neon-lime focus:border-neon-lime block w-full p-2.5 dark:bg-neutral-900 dark:border-neutral-700 dark:text-white">
                        <option value="">-- Sin Proveedor --</option>
                        @foreach($suppliers as $supplier)
                            <option value="{{ $supplier->id }}" {{ old('supplier_id') == $supplier->id ? 'selected' : '' }}>
                                {{ $supplier->name }}
                            </option>
                        @endforeach
                    </select>
                    @error('supplier_id') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block mb-2 text-sm font-bold text-gray-900 dark:text-white">Monto Total ($) <span class="text-red-500">*</span></label>
                    <input type="number" step="0.01" name="total_amount" value="{{ old('total_amount', '0.00') }}" required class="bg-gray-50 border border-gray-400 text-gray-900 text-sm rounded-lg focus:ring-neon-lime focus:border-neon-lime block w-full p-2.5 dark:bg-neutral-900 dark:border-neutral-700 dark:text-white">
                    @error('total_amount') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block mb-2 text-sm font-bold text-gray-900 dark:text-white">Tipo de Gasto <span class="text-red-500">*</span></label>
                    <select name="type" required class="bg-gray-50 border border-gray-400 text-gray-900 text-sm rounded-lg focus:ring-neon-lime focus:border-neon-lime block w-full p-2.5 dark:bg-neutral-900 dark:border-neutral-700 dark:text-white">
                        <option value="Compra" {{ old('type') == 'Compra' ? 'selected' : '' }}>Compra</option>
                        <option value="Factura" {{ old('type') == 'Factura' ? 'selected' : '' }}>Factura</option>
                        <option value="Pedido" {{ old('type') == 'Pedido' ? 'selected' : '' }}>Pedido</option>
                    </select>
                    @error('type') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block mb-2 text-sm font-bold text-gray-900 dark:text-white">Estado de Pago <span class="text-red-500">*</span></label>
                    <select name="status" required class="bg-gray-50 border border-gray-400 text-gray-900 text-sm rounded-lg focus:ring-neon-lime focus:border-neon-lime block w-full p-2.5 dark:bg-neutral-900 dark:border-neutral-700 dark:text-white">
                        <option value="Pendiente" {{ old('status') == 'Pendiente' ? 'selected' : '' }}>Pendiente</option>
                        <option value="Pagado" {{ old('status') == 'Pagado' ? 'selected' : '' }}>Pagado</option>
                        <option value="Cancelado" {{ old('status') == 'Cancelado' ? 'selected' : '' }}>Cancelado</option>
                    </select>
                    @error('status') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block mb-2 text-sm font-bold text-gray-900 dark:text-white">Nº de Comprobante / Factura</label>
                    <input type="text" name="document_number" value="{{ old('document_number') }}" class="bg-gray-50 border border-gray-400 text-gray-900 text-sm rounded-lg focus:ring-neon-lime focus:border-neon-lime block w-full p-2.5 dark:bg-neutral-900 dark:border-neutral-700 dark:text-white">
                    @error('document_number') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block mb-2 text-sm font-bold text-gray-900 dark:text-white">Fecha del Gasto</label>
                    <input type="date" name="expense_date" value="{{ old('expense_date', date('Y-m-d')) }}" class="bg-gray-50 border border-gray-400 text-gray-900 text-sm rounded-lg focus:ring-neon-lime focus:border-neon-lime block w-full p-2.5 dark:bg-neutral-900 dark:border-neutral-700 dark:text-white">
                    @error('expense_date') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
            </div>

            <div class="flex justify-end gap-3 mt-8">
                <a href="{{ route('expenses.index') }}" class="text-white bg-gray-500 hover:bg-gray-600 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">Cancelar</a>
                <button type="submit" class="text-neutral-900 bg-neon-lime hover:bg-[#b3e600] focus:ring-4 focus:outline-none focus:ring-[#b3e600]/50 font-bold rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">Guardar Gasto</button>
            </div>
        </form>
    </div>
</x-layout>