<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{ __('Registrar Nueva Deuda del Negocio') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <form action="{{ route('debts.store') }}" method="POST" class="p-8">
                    @csrf

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Entidad Financiera -->
                        <div class="md:col-span-2">
                            <x-input-label for="provider_name" :value="__('Entidad Financiera / Banco')" />
                            <x-text-input id="provider_name" name="provider_name" type="text" class="mt-1 block w-full text-lg font-bold" :value="old('provider_name')" required placeholder="Ej: BCP, Caja Piura, Préstamo Personal" />
                            <x-input-error :messages="$errors->get('provider_name')" class="mt-2" />
                        </div>

                        <!-- Descripción -->
                        <div class="md:col-span-2">
                            <x-input-label for="description" :value="__('Descripción / Motivo')" />
                            <textarea id="description" name="description" class="mt-1 block w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm" rows="3" placeholder="Ej: Préstamo para compra de capital o insumos...">{{ old('description') }}</textarea>
                            <x-input-error :messages="$errors->get('description')" class="mt-2" />
                        </div>

                        <!-- Monto Total -->
                        <div>
                            <x-input-label for="total_amount" :value="__('Monto de la Deuda (S/)')" />
                            <x-text-input id="total_amount" name="total_amount" type="number" step="0.01" class="mt-1 block w-full text-xl font-black text-rose-600" :value="old('total_amount')" required />
                            <x-input-error :messages="$errors->get('total_amount')" class="mt-2" />
                        </div>

                        <!-- Número de Cuotas -->
                        <div>
                            <x-input-label for="installments" :value="__('Número de Cuotas')" />
                            <x-text-input id="installments" name="installments" type="number" min="1" class="mt-1 block w-full" :value="old('installments', 1)" required />
                            <x-input-error :messages="$errors->get('installments')" class="mt-2" />
                        </div>

                        <!-- Frecuencia de Pago -->
                        <div>
                            <x-input-label for="frequency" :value="__('Frecuencia de Pago')" />
                            <select id="frequency" name="frequency" class="mt-1 block w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm">
                                <option value="diario">Diario</option>
                                <option value="semanal">Semanal</option>
                                <option value="quincenal">Quincenal</option>
                                <option value="mensual" selected>Mensual</option>
                            </select>
                            <x-input-error :messages="$errors->get('frequency')" class="mt-2" />
                        </div>

                        <!-- Fecha de Primera Cuota -->
                        <div>
                            <x-input-label for="due_date" :value="__('Fecha de Primera Cuota')" />
                            <x-text-input id="due_date" name="due_date" type="date" class="mt-1 block w-full" :value="old('due_date', date('Y-m-d'))" required />
                            <x-input-error :messages="$errors->get('due_date')" class="mt-2" />
                        </div>
                    </div>

                    <div class="mt-10 flex gap-4">
                        <x-primary-button class="bg-red-600 dark:bg-red-700 hover:bg-red-700 dark:hover:bg-red-600 transition-colors shadow-none">
                            {{ __('Registrar Deuda Ahora') }}
                        </x-primary-button>
                        <a href="{{ route('debts.index') }}" class="inline-flex items-center px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-300 uppercase tracking-widest shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                            {{ __('Cancelar') }}
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</x-app-layout>
