<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col md:flex-row justify-between items-center gap-4">
            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
                {{ __('Cuentas por Pagar (Deudas del Negocio)') }}
            </h2>
            <a href="{{ route('debts.create') }}" class="inline-flex items-center px-4 py-2 bg-red-600 dark:bg-red-700 border border-transparent rounded-lg font-bold text-xs text-white uppercase tracking-widest hover:bg-red-700 dark:hover:bg-red-600 active:bg-red-900 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition ease-in-out duration-150 shadow-md">
                {{ __('Registrar Deuda Bancaria') }}
            </a>
        </div>
    </x-slot>

    <div class="py-6">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900 dark:text-gray-100">
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                            <thead>
                                <tr>
                                    <th class="px-6 py-3 bg-gray-50 dark:bg-gray-700 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Entidad / Proveedor</th>
                                    <th class="px-6 py-3 bg-gray-50 dark:bg-gray-700 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Monto Total</th>
                                    <th class="px-6 py-3 bg-gray-50 dark:bg-gray-700 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Saldo Restante</th>
                                    <th class="px-6 py-3 bg-gray-50 dark:bg-gray-700 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Fecha Vencimiento</th>
                                    <th class="px-6 py-3 bg-gray-50 dark:bg-gray-700 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Estado</th>
                                    <th class="px-6 py-3 bg-gray-50 dark:bg-gray-700 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider italic">Acciones</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700 font-sans">
                                @forelse ($debts as $debt)
                                    <tr>
                                        <td class="px-6 py-4">
                                            <div class="text-sm font-black text-gray-900 dark:text-white uppercase tracking-tight">{{ $debt->provider_name }}</div>
                                            <div class="text-xs text-gray-500 truncate max-w-xs">{{ $debt->description }}</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                                            S/ {{ number_format($debt->total_amount, 2) }}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-rose-600 dark:text-rose-400 font-black text-lg">
                                            S/ {{ number_format($debt->remaining_balance, 2) }}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm {{ $debt->due_date->isPast() && $debt->status === 'pending' ? 'text-red-600 font-black' : '' }}">
                                                {{ $debt->due_date->format('d/m/Y') }}
                                            </div>
                                            @if($debt->due_date->isFuture() && $debt->status === 'pending')
                                                <div class="text-[10px] text-gray-400">En {{ $debt->due_date->diffForHumans() }}</div>
                                            @endif
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            @if($debt->status === 'paid')
                                                <span class="px-2 py-1 text-xs font-black bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400 rounded-full italic uppercase">Pagado</span>
                                            @elseif($debt->due_date->isPast())
                                                <span class="px-2 py-1 text-xs font-black bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400 rounded-full shadow-sm animate-pulse uppercase italic">Vencido</span>
                                            @else
                                                <span class="px-2 py-1 text-xs font-black bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400 rounded-full border border-amber-200 dark:border-amber-900/50 uppercase italic">Pendiente</span>
                                            @endif
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                            <a href="{{ route('debts.installments', $debt->id) }}"
                                                class="inline-flex items-center px-4 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-black rounded-lg shadow-md transition-all uppercase italic">
                                                Ver Detalle / Cronograma
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="px-6 py-10 text-center text-gray-500">No se encontraron deudas financieras registradas.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal para Pago de Deuda -->
    <div id="debtModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closeDebtModal()"></div>
            <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                <form id="debtForm" method="POST" class="p-8">
                    @csrf
                    @method('PUT')
                    
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="text-xl font-black text-gray-900 dark:text-white uppercase tracking-tight" id="modalTitle">Registrar Pago a Banco</h3>
                        <button type="button" onclick="closeDebtModal()" class="text-gray-400 hover:text-gray-600 focus:outline-none">
                            <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="M6 18L18 6M6 6l12 12"/></svg>
                        </button>
                    </div>
                    
                    <div class="space-y-5">
                        <div class="bg-rose-50 dark:bg-rose-900/10 p-4 rounded-xl border border-rose-100 dark:border-rose-900/30">
                            <label class="block text-xs font-black text-rose-600 dark:text-rose-400 uppercase tracking-widest mb-1">Entidad Financiera</label>
                            <input type="text" id="modalDebtProvider" disabled class="w-full bg-transparent p-0 text-lg font-black text-rose-800 dark:text-rose-200 border-none focus:ring-0">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-bold text-gray-700 dark:text-gray-300 ml-1 mb-1">Monto a Descontar (S/)</label>
                            <input type="number" name="amount" id="modalDebtAmount" step="0.01" required
                                class="block w-full p-3 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm focus:ring-rose-500 focus:border-rose-500 font-bold text-xl">
                            <p class="text-xs text-gray-500 mt-2 ml-1">Saldo restante de la deuda: <span class="font-bold">S/ <span id="modalDebtBalance"></span></span></p>
                        </div>
                    </div>
                    
                    <div class="mt-8">
                        <button type="submit" class="w-full bg-rose-600 text-white py-4 rounded-xl font-black text-lg shadow-xl shadow-rose-200 dark:shadow-none hover:bg-rose-700 transition-all uppercase tracking-widest">
                            Confirmar Pago
                        </button>
                        <p class="text-[10px] text-center text-gray-400 mt-3 font-medium">ESTA ACCIÓN DESCONTARÁ EL MONTO DEL SALDO PENDIENTE DE TU DEUDA</p>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        function openDebtModal(id, provider, balance) {
            const form = document.getElementById('debtForm');
            form.action = `/debts/${id}`;
            document.getElementById('modalDebtProvider').value = provider;
            document.getElementById('modalDebtBalance').innerText = balance.toFixed(2);
            document.getElementById('modalDebtAmount').max = balance;
            document.getElementById('modalDebtAmount').value = balance;
            document.getElementById('debtModal').classList.remove('hidden');
        }

        function closeDebtModal() {
            document.getElementById('debtModal').classList.add('hidden');
        }
    </script>
</x-app-layout>
