<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between items-center">
            <h2 class="font-semibold text-2xl text-gray-800 leading-tight flex items-center gap-3">
                <div class="p-2 bg-rose-100 rounded-lg text-rose-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                </div>
                {{ __('Registrar Nuevo Gasto') }}
            </h2>
            <a href="{{ route('expenses.index') }}" class="inline-flex items-center text-sm text-gray-500 hover:text-indigo-600 font-medium transition-colors">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12"></path></svg>
                Volver a la lista
            </a>
        </div>
    </x-slot>

    <div class="py-8">
        <div class="max-w-2xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-2xl sm:rounded-3xl border border-gray-100">
                <!-- Header Card -->
                <div class="bg-gradient-to-r from-gray-50 to-white border-b border-gray-100 px-8 py-6">
                    <h3 class="text-lg font-bold text-gray-800">Detalles de la Salida de Dinero</h3>
                    <p class="text-xs text-gray-500 mt-1">Completa los campos para registrar un nuevo egreso de caja.</p>
                </div>

                <div class="p-8">

                    @if ($errors->any())
                        <div class="mb-6 bg-red-50 border-l-4 border-red-500 p-4 rounded-r-lg">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <svg class="h-5 w-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                                <div class="ml-3">
                                    <h3 class="text-sm font-medium text-red-800">Por favor corrige los siguientes errores:</h3>
                                    <div class="mt-2 text-sm text-red-700">
                                        <ul class="list-disc pl-5 space-y-1">
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    <form action="{{ route('expenses.store') }}" method="POST" id="expenseForm">
                        @csrf

                        <div class="flex flex-col gap-6">
                            
                            <!-- Monto del Gasto -->
                            <div class="bg-indigo-50/50 border border-indigo-100 rounded-xl p-6">
                                <label for="amount" class="block text-sm font-semibold text-indigo-900 mb-2 flex items-center">
                                    <svg class="w-5 h-5 mr-1.5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                    Monto Total (Soles) <span class="text-rose-500 ml-1">*</span>
                                </label>
                                <div class="relative rounded-lg shadow-sm">
                                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                        <span class="text-indigo-800 sm:text-lg font-bold">S/</span>
                                    </div>
                                    <input type="number" name="amount" id="amount" step="0.01" min="0.10" value="{{ old('amount') }}" required
                                        class="focus:ring-indigo-600 focus:border-indigo-600 block w-full pl-12 pr-4 sm:text-2xl font-bold border-indigo-200 rounded-lg h-14 text-indigo-900 bg-white shadow-sm" placeholder="0.00">
                                </div>
                                <p class="mt-2 text-xs text-indigo-600">¿Cuánto dinero exacto está saliendo de la caja?</p>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <!-- Categoría -->
                                <div>
                                    <label for="category" class="block text-sm font-medium text-gray-700 mb-1 flex items-center">
                                        <svg class="w-4 h-4 mr-1.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></svg>
                                        Categoría del Gasto <span class="text-rose-500 ml-1">*</span>
                                    </label>
                                    <select id="category" name="category" required class="mt-1 block w-full pl-3 pr-10 text-sm border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 rounded-lg bg-white shadow-sm h-11">
                                        <option value="" disabled selected>Seleccione el tipo de egreso...</option>
                                        <option value="supplier_payment" {{ old('category') == 'supplier_payment' ? 'selected' : '' }}>📦 Pago Proveedor</option>
                                        <option value="internal_credit" {{ old('category') == 'internal_credit' ? 'selected' : '' }}>💳 Crédito / Adelantos</option>
                                        <option value="services" {{ old('category') == 'services' ? 'selected' : '' }}>⚡ Servicios (Luz, etc)</option>
                                        <option value="other" {{ old('category') == 'other' ? 'selected' : '' }}>🏷️ Gastos Varios</option>
                                    </select>
                                </div>

                                <!-- Fecha del Gasto -->
                                <div>
                                    <label for="expense_date" class="block text-sm font-medium text-gray-700 mb-1 flex items-center">
                                        <svg class="w-4 h-4 mr-1.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                                        Fecha del Gasto <span class="text-rose-500 ml-1">*</span>
                                    </label>
                                    <input type="date" name="expense_date" id="expense_date" required value="{{ old('expense_date', date('Y-m-d')) }}"
                                        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-lg text-gray-700 h-11">
                                </div>
                            </div>

                            <!-- Descripción -->
                            <div>
                                <label for="description" class="block text-sm font-medium text-gray-700 mb-1 flex items-center">
                                    <svg class="w-4 h-4 mr-1.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"></path></svg>
                                    Descripción Detallada <span class="text-rose-500 ml-1">*</span>
                                </label>
                                <input type="text" name="description" id="description" required value="{{ old('description') }}"
                                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-lg h-11" placeholder="Ej. Pago a distribuidora por 2 docenas de gaseosas Inka Kola">
                                <p class="mt-1.5 text-xs text-gray-500">Sé lo más descriptivo posible para saber exactamente en qué se gastó.</p>
                            </div>

                            <!-- N° Referencia (Opcional) -->
                            <div>
                                <label for="reference" class="block text-sm font-medium text-gray-700 mb-1 flex items-center">
                                    <svg class="w-4 h-4 mr-1.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                                    N° Documento / Comprobante <span class="text-gray-400 font-normal text-xs ml-1">(Opcional)</span>
                                </label>
                                <input type="text" name="reference" id="reference" value="{{ old('reference') }}"
                                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-lg h-11" placeholder="Ej. Factura F001-458 / Recibo #848 / Voucher Yape">
                            </div>

                        </div>

                        <div class="mt-8 pt-6 border-t border-gray-100 flex items-center justify-end gap-3">
                            <a href="{{ route('expenses.index') }}" class="bg-white py-2.5 px-4 border border-gray-300 rounded-xl shadow-sm text-sm font-bold text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">
                                Cancelar
                            </a>
                            <button type="submit" class="inline-flex justify-center py-2.5 px-6 border border-transparent shadow-sm text-sm font-bold rounded-xl text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">
                                <svg class="w-5 h-5 mr-2 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                Guardar Gasto
                            </button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</x-app-layout>
