<div>
    <h1 class="text-2xl font-bold text-gray-800 mb-6">Gestión de desembolsos</h1>

    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
        <table class="w-full text-sm">
            <thead>
                <tr class="bg-gray-50 text-gray-500 text-xs uppercase">
                    <th class="px-4 py-3 text-left">Radicado</th>
                    <th class="px-4 py-3 text-left">Asociado</th>
                    <th class="px-4 py-3 text-right">Monto aprobado</th>
                    <th class="px-4 py-3 text-right">Desembolsado</th>
                    <th class="px-4 py-3 text-center">Estado</th>
                    <th class="px-4 py-3 text-center">Acción</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @forelse($solicitudes as $sol)
                <tr class="hover:bg-gray-50 transition">
                    <td class="px-4 py-3 font-mono font-bold text-blue-700 text-xs">{{ $sol->radicado }}</td>
                    <td class="px-4 py-3 font-medium text-gray-800">{{ $sol->asociado->name }}</td>
                    <td class="px-4 py-3 text-right">${{ number_format($sol->monto_solicitado, 0, ',', '.') }}</td>
                    <td class="px-4 py-3 text-right text-green-700 font-medium">
                        ${{ number_format($sol->desembolsos->sum('monto'), 0, ',', '.') }}
                    </td>
                    <td class="px-4 py-3 text-center">
                        <span class="px-2 py-0.5 rounded-full text-xs font-semibold bg-{{ $sol->estado->color() }}-100 text-{{ $sol->estado->color() }}-800">
                            {{ $sol->estado->label() }}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-center">
                        @if(!$sol->rechazada())
                        <button wire:click="seleccionar({{ $sol->id }})"
                            class="text-xs bg-green-100 text-green-800 hover:bg-green-200 px-3 py-1.5 rounded-lg font-medium transition">
                            + Desembolso
                        </button>
                        @endif
                    </td>
                </tr>
                @empty
                <tr><td colspan="6" class="text-center py-12 text-gray-400">No hay solicitudes aprobadas</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Modal / formulario de desembolso --}}
    @if($solicitudSeleccionada)
    <div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
        <div class="bg-white rounded-2xl shadow-xl w-full max-w-md p-6">
            <h2 class="text-lg font-bold text-gray-800 mb-4">Registrar desembolso</h2>

            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Monto (COP) *</label>
                    <input wire:model.lazy="monto" type="number" step="1000"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500">
                    @error('monto') <p class="text-red-600 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Fecha desembolso *</label>
                    <input wire:model="fecha_desembolso" type="date"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Medio de pago *</label>
                    <select wire:model="medio_pago" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
                        <option value="transferencia">Transferencia bancaria</option>
                        <option value="cheque">Cheque</option>
                        <option value="efectivo">Efectivo</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">N° comprobante</label>
                    <input wire:model.lazy="numero_comprobante" type="text"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm" placeholder="Opcional">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Observaciones</label>
                    <textarea wire:model.lazy="observaciones" rows="2"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm"></textarea>
                </div>
            </div>

            <div class="flex gap-3 mt-5">
                <button wire:click="$set('solicitudSeleccionada', null)"
                    class="flex-1 border border-gray-300 text-gray-700 rounded-lg py-2 text-sm hover:bg-gray-50 transition">
                    Cancelar
                </button>
                <button wire:click="registrarDesembolso"
                    class="flex-1 bg-green-700 text-white rounded-lg py-2 text-sm font-semibold hover:bg-green-800 transition">
                    ✅ Registrar
                </button>
            </div>
        </div>
    </div>
    @endif
</div>
